Question

我正在尝试创建一个firebug类型的翻转元素选择器，但似乎在翻转触发包含我的目标元素的父元素时出现问题。

请参阅以下示例：

http://jsbin.com/elofe3/edit

页面上有3个div，全部都是mouseenter / mouseleave监听器，最大的是完全独立于其他两个，第二个是最大的位置，但不包含在其中，并且sallest嵌套在第二大，（它的父母）。如果查看源代码，可能更容易想象。

如果单击预览并将鼠标滚过中央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监听器，但它不会在evey示例中工作（例如，嵌套在其父级中的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

Jquery Mouseenter触发父元素

1 个答案: