javascript - Jquery Mouseenter 触发父元素

Question

我正在尝试创建一个 Firebug 类型的翻转元素选择器，但似乎在翻转触发包含我的目标元素的父元素方面遇到了问题。

请看下面的例子:

http://jsbin.com/elofe3/edit

页面上有 3 个 div，都有 mouseenter/mouseleave 监听器，最大的完全独立于其他两个，第二大的位于最大的之上但不包含在其中，sallest 嵌套在第二大，(它是 parent )。如果您查看源代码，可能更容易形象化。

如果您单击预览并将鼠标悬停在中间的 div 上，您会注意到第二大的 div 也继续响应 mouseenter 事件并保持为红色轮廓。为了解决这个问题，我尝试添加 $(this).parent().trigger("mouseout");在每个翻转监听器上。

http://jsbin.com/elofe3/4/edit

但是当你的鼠标离开最小的(粉红色)div 到中间的(黑色)div 时，中间的 div 不会触发(大概是因为 mouseenter/mouseover 没有被触发，因为鼠标从未真正离开中央 div .

我知道在这种情况下我可以添加 $(this).parent().trigger("mouseover");到每个 div 上的 mouseleave 监听器，但它在每个示例中都不起作用(例如，嵌套在其父级中的 div，但位于页面上该父级之外。)

我需要一些新颖的解决方案，它需要与 Firebug 、元素选择器(允许您在页面上滚动元素(突出显示它们)并单击以选择它们并触发它以显示源的工具)非常相似对于那个元素)。

非常感谢任何帮助。

Answer 1

这就是 mouseenter 和 mouseleave 的工作方式。但是你误导了，mouseenter 不在父元素上触发。相反，如果您将鼠标悬停在后代上，则不会触发 mouseleave。所以边框不是再次添加，而是永远不会删除。

将事件处理程序添加到 mouseover 和 mouseout 并防止事件冒泡:

$("div").mouseover(function(e) {
  e.stopPropagation();
  $(this).css("outline", "solid 3px red");     
});

$("div").mouseout(function(e) {
  e.stopPropagation();
  $(this).css("outline", "none");       
});

http://jsbin.com/elofe3/5/edit