Question

我有一个span，其中包含一个锚点和一个span。以下示例

<span id="x"><a id="a_in" href="">link</a><span id="x_in">x</span></span>

现在我在mousenter上附加了mouseleave / span个事件id="x"。当我将鼠标悬停在span id="x"上时，会触发mousenter / mouseleave，这很好。问题是当mouseover父span id="x_1"鼠标内的span被触发时。

我希望mousenter / mouseleave仅在父{I} mouseenter或mouseleave时触发。

任何想法如何避免这种情况？

Answer 1

简答：你无法避免这种情况，但是你可以确定mouseleave / enter只发生在父

上

function mouseleaveOrEnterHandler(e){
   e = e || window.event;
   var target = e.target || e.which;
   if(target.id=='x') {
      //do something here
   }
}

Answer 2

请具体说明您想要触发哪些元素。如果你使用jQuery：$("span#x").hover(function() { //action logic for mouse enter }, function() { //action logic for mouse leave });

Answer 3

您需要cancelBubble()和stopPropagation()。

见这里：http://www.thedutchguy.com/article/javascript-prevent-event-bubbling-parent-child-when-fired.html

也在这里：http://www.openjs.com/articles/prevent_default_action/

Answer 4

好的......谢谢你们。问题在于我在mouseenter上显示的一个新div，它与我的SPAN X重叠并触发了mouseleave。

也...

MooTools具有mouseenter和 mouseleave因为mouseover / mouseout 有时只是不起作用预期。 Mouseenter只触发一次你输入元素而不是如果你的鼠标穿过，再次开火元素的孩子。

......所以它几乎可以满足你们的建议并且工作正常。 http://demos.mootools.net/Mouseenter

以防万一有人正在寻找如何使用mootools来阻止传播......

$（'myelement'）。addEvent（'click'，function（e）{ var event = e || window.event; if（event.stopPropagation）{ event.stopPropagation（）; } else { event.cancelBubble = true; } }）;

感谢您的帮助！

鼠标悬停/离开问题

4 个答案: