jquery - 每个孩子都会触发 jQuery dragenter 事件

Question

我dragenter在一个包含一些孩子的对象上绑定了事件。

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

当我在它们周围拖动文件移动时，此事件会重复触发。我所期望的是dragenter仅在进入#container元素时触发，而不是每个孩子。

这是正确的行为吗？我该如何预防？

Answer 1

可以测试触发事件的元素是不是容器：

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');
    }  
});

Answer 2

尝试添加 stopPropagation

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

Answer 3

我对这个问题的回答是使用事件捕获而不是事件冒泡。

简而言之，事件捕获从外部元素“涓涓细流”到源元素或直到e.stopPropagation()被调用。

事件冒泡使事件从源元素向上通过父元素，直到它到达文档或停止e.stopPropagation()。

因此，要应用到拖动输入，您希望外部 div 处理事件，即使它实际上是生成事件的内部 div。

使用事件捕获使 ondragenter 在内部 div 之前在外部 div 中触发。在外部 div 事件处理程序中，您调用 e.stopPropagation。所以内部 div 事件处理程序从未真正运行。

这是使用jquery捕获事件的方法：

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

注意最后一个参数。