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

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

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

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

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

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

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

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

注意最后一个参数。

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

3 个答案: