javascript - .hover() 在具有子 ID 的父对象上触发

Question

我正在尝试跟踪用户的鼠标移动，现在我已经将 .hover() 绑定(bind)应用于 body $("body *").hover() 下的所有元素

当鼠标进入一个嵌套的元素时，“mouseenter”被触发的次数与它的父元素一样多。这对我来说没问题，但我的问题是我可以在函数中访问的 id 始终是子元素之一。

这是一个工作示例:https://jsfiddle.net/jgyncf3w/1/ 如果您同时将鼠标悬停在“p-1”和 div 上，它将在控制台“p-1 - in”中打印 3 次。如果您在进入子元素时已经在其中一个父元素中，则不会发生这种情况。

将选择器更改为 $("body") 并不能解决我的问题，因为它会在同一父级的子级之间进行转换时产生不良行为。

我的问题是，有没有办法在保持当前行为的同时访问正确的 ID？

Answer 1

您可以使用事件的 stopPropagation() 方法来阻止事件冒泡到 DOM 以被每个父元素捕获:

$("body *").hover(function(e) {
    e.stopPropagation();
    if (e.target.id.length > 0) {
        console.log(e.target.id + " - in");
    }
}, function(e) {
    e.stopPropagation();
    if (e.target.id.length > 0) {
        console.log(e.target.id + " - out");
    }
});

另请注意，您可以通过在 body 上使用两个委托(delegate)处理程序并通过 target 属性检查引发事件的元素来获得更好的性能，而不是应用两个DOM 中每个元素的事件处理程序。试试这个:

$("body").on('mouseenter', '*', function(e) {
    e.stopPropagation();
    if (e.target.id.length)
        console.log(e.target.id + ' - in');
}).on('mouseleave', '*', function(e) {
    e.stopPropagation();
    if (e.target.id.length)
        console.log(e.target.id + ' - out');
});

Working example