Question

我的<div>包含<img />。

使用 jQuery 1.7 ，我将mouseout事件绑定到<div>。

当触发事件时，e.target.nodeName会返回IMG而不是其绑定的实际DIV。但是，如果我为<div>提供了特定的高度和宽度，则e.target.nodeName会返回DIV。

这是一个错误吗？或者只是不可能将鼠标事件绑定到没有设置尺寸的<div>？

Answer 1

这不是错误。您遇到了称为事件冒泡的浏览器行为。由于您的div元素没有维度，因此仅针对剩余的实际边界框调度mouseout事件，在本例中为img元素。然后，在调用原始目标的任何侦听器之后，该事件被“冒泡”。它继续进行该DOM对象的所有祖先元素 - 首先是img父级（实际附加和调用侦听器的div），然后是div的父元素此事件上的任何其他侦听器也将运行，依此类推，直到它最终到达文档级别或事件传播被取消。因此，事件目标将是调度事件的原始元素。

可能有一种方法可以不同地构建代码，这样您仍然可以测试您想知道的任何内容。例如：

if (e.target.nodeName == "DIV")

可能会变成......

if ($(e.target).parent().is("div"))

如果您总是期望img是唯一具有实质维度的边界框的元素，并且它是您正在寻找的div元素的已知子元素。< / p>

如果您提供的代码段无法按预期运行，我们可能会建议一种解决方法。

Answer 2

不，这不是错误。这是因为事件冒泡而发生的。鼠标悬停在img气泡上直到您挂钩监听器的父/外容器div时发生的事件。最后，它会再次冒泡到document。

第一个问题是，你想在这里实现什么？这种行为完全正常，不是错误。由于性能原因，人们期望事件冒泡到容器，这就是人们使用.bind()而不是直接将单个.mouseout()分配给img元素的原因，因为这样效率很低，因为浏览器会有扫描整个DOM以获取该特定的img元素。

因为你在1.7，所以你应该使用.on()：

$(elements).on(events [, selector] [, data], handler);

所以在你的情况下，它将是

$('#div_id').on('mouseout', 'img', function(e){
//dostuff
});

这样，事件只会从您的img传播到您定义#div_id这个div的元素，而不是等待它冒泡到document根。

jQuery事件错误？

2 个答案: