0

我有一个span包含一个锚点和一个span. 下面的例子

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

现在我在with上附加一个mousenter/mouseleave事件。当我将鼠标悬停在它上时，它会触发/很好。问题是当我在父mouseleave 内部被触发时。spanid="x"span id="x"mousentermouseleavemouseoverspan id="x_1"span

我希望mousenter/mouseleave仅在我mouseenter或mouseleave父母时被触发。

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

4

4 回答 4

2

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

function mouseleaveOrEnterHandler(e){
   e = e || window.event;
   var target = e.target || e.which;
   if(target.id=='x') {
      //do something here
   }
}
于 2010-10-15T08:11:08.707 回答
1

只需具体说明您想在什么元素上触发什么事件。如果您使用 jQuery：$("span#x").hover(function() { //action logic for mouse enter }, function() { //action logic for mouse leave });

于 2010-10-15T08:29:30.490 回答
0

你需要cancelBubble()和stopPropagation()。

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

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

于 2010-10-15T08:07:26.437 回答
0

好的……谢谢各位。问题出现在我在 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; } });

感谢您的帮助！

于 2010-10-15T10:00:30.847 回答