jQuery on() và stopPropagation()

Question

Tôi có một ngăn bên cạnh trượt từ bên trái, thêm nội dung động với get(). Tôi muốn tất cả các nhấp chuột bên ngoài cửa sổ để làm cho nó đóng bằng cách kích hoạt một chức năng. Dựa trên các câu hỏi khác tôi đọc, tôi đã đưa ra đoạn mã sau.

$('html').click(function() { 
    if (side_showing) { 
     close_side(); 
    } 
}); 

$(document).on("click", "#side", function(event) { 
    event.stopPropagation(); 
}); 

Tôi dường như không làm cho nó hoạt động. Tôi biết rằng chức năng on() đang được kích hoạt, nhưng event.stopPropagation dường như không. Có lời khuyên nào không?

Answer 1

Bạn không thể sử dụng stopPropagation() với xử lý sự kiện được ủy quyền (trong đó trình xử lý sự kiện nằm trên bố mẹ).

Đó là vì nó là sự kiện tuyên truyền làm cho công việc xử lý sự kiện được ủy quyền ở vị trí đầu tiên do đó vào lúc xử lý sự kiện của bạn được gọi, sự kiện đã được truyền bá.

Thứ tự của sự việc xảy ra trong mã của bạn là: sự kiện tuyên truyền lên đối tượng tài liệu, sau đó trình xử lý sự kiện của bạn được gọi. Vì vậy, khi bạn gọi event.stopPropagation() nó không làm bất cứ điều gì bởi vì sự kiện đã được phổ biến.

Nếu bạn cần giữ các đối tượng gốc không nhận được sự kiện tuyên truyền, thì bạn không thể sử dụng xử lý sự kiện được ủy nhiệm. Bạn sẽ phải gán trình xử lý sự kiện trực tiếp cho chính các đối tượng để bạn có thể chặn sự kiện TRƯỚC KHI nó truyền đi. Nếu đây là những đối tượng được tạo động, thì bạn sẽ phải gán các trình xử lý sự kiện cho chúng ngay sau khi chúng được tạo ra. Chỉ có một giải pháp khác mà tôi biết là đặt trình xử lý sự kiện vào đối tượng cha mẹ mà bạn không muốn thấy các sự kiện này và đảm bảo các trình xử lý sự kiện đó bỏ qua các sự kiện nếu chúng bắt nguồn từ đối tượng #side của bạn.