[英]Jquery Mouseenter triggering parent elements
I am trying to create a firebug type rollover element selector, but seem to be having problems with the rollover triggering parent elements that contain my target element. 我正在尝试创建一个firebug类型的翻转元素选择器,但似乎在翻转触发包含我的目标元素的父元素时出现问题。
See the following example: 请参阅以下示例:
http://jsbin.com/elofe3/edit http://jsbin.com/elofe3/edit
There are 3 divs on the page, all with mouseenter/mouseleave listeners, the largest is totally independent of theother two, the second largest is position ontop of the largest but is not contained within it, and the sallest is nested within the second largest, (it's parent). 页面上有3个div,都有mouseenter / mouseleave监听器,最大的完全独立于其他两个,第二个是最大的位置,但不包含在其中,而sallest嵌套在第二大, (这是父母)。 It may be easier to visualise if you look at the source. 如果查看源代码,可能更容易想象。
If you click preview and roll you mouse over the central div, you will notice that the second largest div also continues to respond to the mouseenter event and remains outlined in red. 如果单击预览并将鼠标滚动到中央div上,您会注意到第二大div也会继续响应mouseenter事件并保持红色轮廓。 To fix this, I tried to add $(this).parent().trigger("mouseout"); 为了解决这个问题,我尝试添加$(this).parent()。trigger(“mouseout”); on each rollover listener. 在每个翻转监听器上。
http://jsbin.com/elofe3/4/edit http://jsbin.com/elofe3/4/edit
But them when your mouse leaves the smallest (pink) div, to the middle (black) div, the middle div does not fire (presumably because mouseenter/mouseover is not being fired as the mouse has never actually left the central div. 但是当你的鼠标离开最小(粉红色)div到中间(黑色)div时,中间div不会发射(大概是因为鼠标实际上没有离开中央div,因此没有触发mouseenter / mouseover)。
I understand that in this situation I could just add $(this).parent().trigger("mouseover"); 我知道在这种情况下我可以添加$(this).parent()。trigger(“mouseover”); to the mouseleave listener on each div, but it would'nt work in evey example, (for instance, a div nested within its parent, but is positioned outside of that parent on the page.) 对每个div上的mouseleave监听器,但它不会在evey示例中工作(例如,嵌套在其父级中的div,但位于页面上该父级之外。)
I require some novel solution to this, it needs to work very similarly to the firebug, element selector (the tool that lets you rollover elements on the page (higlighting them) and click to select them and triggering it to show the source for that element). 我需要一些新颖的解决方案,它需要与firebug,元素选择器(允许您在页面上翻转元素的工具)相似的工作(高亮显示它们)并单击以选择它们并触发它以显示该元素的源)。
Any help greatly appreciated. 任何帮助非常感谢。
This is how mouseenter
and mouseleave
work. 这就是mouseenter
和mouseleave
工作原理。 But you are mislead, mouseenter
is not triggered on the parent element. 但是你误导了, 不会在父元素上触发mouseenter
。 Instead, mouseleave
is not triggered if you hover over descendants. 相反,如果将鼠标悬停在后代上,则不会触发mouseleave
。 So it is not that the border is added again, but that it is never removed. 因此,不是再次添加边框,而是永远不会删除边框。
Add the event handlers to mouseover
and mouseout
and prevent the event from bubbling up: 将事件处理程序添加到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 http://jsbin.com/elofe3/5/edit
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.