我dragenter
在一个包含一些孩子的对象上绑定了事件。
$(document).on('dragenter', '#container', function(e) {
console.log('dragenter');
});
当我在它们周围拖动文件移动时,此事件会重复触发。我所期望的是dragenter
仅在进入#container
元素时触发,而不是每个孩子。
这是正确的行为吗?我该如何预防?
可以测试触发事件的元素是不是容器:
var container = $('#container').get(0);
$(document).on('dragenter', '#container', function(event) {
if(event.target === container) {
console.log('dragenter');
}
});
或者,如果您不必使用事件委托:
$('#container').on('dragenter', function(event) {
if(event.target === this) {
console.log('dragenter');
}
});
尝试添加 stopPropagation
$(document).on('dragenter', '#container', function(e) {
e.stopPropagation();
console.log('dragenter');
});
我对这个问题的回答是使用事件捕获而不是事件冒泡。
简而言之,事件捕获从外部元素“涓涓细流”到源元素或直到e.stopPropagation()
被调用。
事件冒泡使事件从源元素向上通过父元素,直到它到达文档或停止e.stopPropagation()
。
因此,要应用到拖动输入,您希望外部 div 处理事件,即使它实际上是生成事件的内部 div。
使用事件捕获使 ondragenter 在内部 div 之前在外部 div 中触发。在外部 div 事件处理程序中,您调用 e.stopPropagation。所以内部 div 事件处理程序从未真正运行。
这是使用jquery捕获事件的方法:
$("#outerDiv").get(0).addEventListener("ondragenter", function(e){e.stopPropagation()}, true);
注意最后一个参数。