鼠标悬停/离开问题

发布于 2024-09-27 17:50:54 字数 651 浏览 11 评论 0原文

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

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

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

我希望仅当我 mouseenter 或 mouseleave 父级时才触发 mouseenter / mouseleave 。

有什么想法如何避免这种情况吗？

原文

I have a span that includes an anchor and a span. Example below

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

Now I am attaching a mousenter / mouseleave event on the span with id="x". When I mouse over the the span id="x" it triggers the mousenter / mouseleave that's fine. The problem is when I mouseover the span id="x_1" inside the parent span mouseleave gets triggered.

I want mousenter / mouseleave to be triggered only when I mouseenter or mouseleave the parent.

Any ideas how to avoid this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不念旧人 2024-10-04 17:50:54

简短回答：你无法避免这一点，
但你可以确定 mouseleave/enter 只发生在父级上

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

short answer: you can't avoid this,
but you can determine that the mouseleave/enter only happens on the parent

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

回复收藏 0 原文

十二 2024-10-04 17:50:54

只需具体说明您想要在什么事件上触发什么元素即可。如果您使用 jQuery： $("span#x").hover(function() { //鼠标输入的动作逻辑 }，功能（） { //鼠标离开的动作逻辑 });

回复收藏 0 原文

甩你一脸翔 2024-10-04 17:50:54

您需要 cancelBubble() 和 stopPropagation()。

请参阅此处：http://www. thedutchguy.com/article/javascript-prevent-event-bubbling-parent-child-when-fired.html

以及此处：

回复收藏 0 原文

梦途 2024-10-04 17:50:54

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

还...

MooTools 具有 mouseenter 和
mouseleave 因为鼠标悬停/鼠标移出
有时只是不工作
预期的。 Mouseenter 只触发一次
您输入了该元素，但没有
如果鼠标经过则再次触发
元素的子元素。

...所以它几乎按照你们的建议做了，而且效果很好。
http://demos.mootools.net/Mouseenter

以防万一有人正在寻找如何停止传播mootools...

$('myelement').addEvent('click', function (e) {
var 事件 = e ||窗口.事件;
if (event.stopPropagation) {
event.stopPropagation();
} 别的 {
event.cancelBubble = true;
}
});

感谢您的帮助！