每个孩子都会触发 jQuery dragenter 事件答案

【问题标题】：jQuery dragenter event is fired on every child每个孩子都会触发 jQuery dragenter 事件
【发布时间】：2012-04-24 12:05:16
【问题描述】：

我已将dragenter 事件绑定到包含一些子对象的对象上。

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

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

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

【问题讨论】：

标签： jquery dragenter

【解决方案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');
    }  
});

【讨论】：

不幸的是，如果#container 被它的孩子完全覆盖，这个测试总是失败。是不是不能用dragend 绑定孩子 - 只是#container ？
好的，我用你的回答摆脱了这个。但是，我仍然对仅将父级与事件绑定感到好奇。 ;-) 谢谢！

【解决方案2】：

尝试添加 stopPropagation

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

【讨论】：

使用 $('#container') 作为选择器而不是 $(document)
我必须这样做，因为我需要on的实时行为。
文档指出事件从“#container”冒泡到选择器 $(document)。在您的情况下，预期行为与真实行为不同，您需要过滤自己（据我所知）（请参阅 Felix 的回答）

【解决方案3】：

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

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

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

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

使用事件捕获使 ondragenter 在 Outer Div 中在 Inner div 之前触发。在外部 div 事件处理程序中，您调用 e.stopPropagation。所以内部的 div 事件处理程序永远不会真正运行。

This是如何使用jquery捕获事件：

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

注意最后一个参数。

【讨论】：