Sự kiện trình kéo jQuery được kích hoạt trên mọi trẻ

Question

Tôi đã ràng buộc dragenter sự kiện trên một đối tượng có chứa một số trẻ em.

$(document).on('dragenter', '#container', function(e) { 
    console.log('dragenter'); 
}); 

Khi tôi di chuyển bằng tệp được kéo xung quanh, sự kiện này được kích hoạt liên tục. Điều tôi mong đợi chỉ kích hoạt dragenter chỉ khi nhập #container yếu tố, không phải mọi trẻ em nữa.

Đó có phải là hành vi thích hợp không? Làm thế nào tôi có thể ngăn chặn nó?

Answer 1

Bạn có thể kiểm tra xem các yếu tố đó gây ra sự kiện này là các thùng chứa:

var container = $('#container').get(0); 

$(document).on('dragenter', '#container', function(event) { 
    if(event.target === container) { 
     console.log('dragenter'); 
    } 
}); 

Hoặc nếu bạn không cần phải sử dụng đoàn sự kiện:

$('#container').on('dragenter', function(event) { 
    if(event.target === this) { 
     console.log('dragenter'); 
    } 
}); 

Answer 2

cố gắng để thêm stopPropagation

$(document).on('dragenter', '#container', function(e) { 
    e.stopPropagation(); 
    console.log('dragenter'); 
}); 

Answer 3

Câu trả lời của tôi cho câu hỏi này là sử dụng event capturing thay vì ev ent bubbling.

Tóm lại, sự kiện chụp "nhỏ giọt" từ phần tử bên ngoài, thành phần tử nguồn hoặc cho đến khi e.stopPropagation() được gọi.

Sự kiện bong bóng bong bóng sự kiện lên từ phần tử nguồn lên qua cha mẹ cho đến khi nó đến tài liệu hoặc bị dừng với e.stopPropagation().

Vì vậy, để áp dụng cho kéo nhập, bạn muốn div bên ngoài xử lý sự kiện, mặc dù nó thực sự là div bên trong đang tạo sự kiện.

Sử dụng tính năng chụp sự kiện làm cho ondragenter cháy trong Div ngoài trước div bên trong. Trong trình xử lý sự kiện div outter, bạn gọi e.stopPropagation. Vì vậy, trình xử lý sự kiện div bên trong không bao giờ thực sự chạy.

This là làm thế nào để sử dụng jquery để nắm bắt sự kiện:

$("#outerDiv").get(0).addEventListener("ondragenter", function(e){e.stopPropagation()}, true); 

Lưu ý các tham số cuối cùng.