5

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

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

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

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

4

3 回答 3

12

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

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');
    }  
});
于 2012-04-24T12:09:04.917 回答
0

尝试添加 stopPropagation

$(document).on('dragenter', '#container', function(e) {
  e.stopPropagation();
  console.log('dragenter');
});
于 2012-04-24T12:07:34.087 回答
0

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

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

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

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

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

是使用jquery捕获事件的方法:

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

注意最后一个参数。

于 2016-12-22T23:46:08.387 回答