如何在 jQuery 中忽略子元素上的鼠标事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/766286/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I ignore mouse events on child elements in jQuery?
提问by Stephen Belanger
I have an unordered list with mouseover and mouseout events attached to the li elements. Each contains a link and there is a bit of padding in the li. When I mouseover the li the mouseover event is fired, but when I mouseover the link containedin the li the mouseout and the mouseover events are both fired in order. It seems the child elements are firing their parent elements mouse events...how do I go about stopping this? I want it to just stay mouseovered when mousing over the links, not activating the animations every time I mouse over a link. This is my code;
我有一个无序列表，其中包含附加到 li 元素的 mouseover 和 mouseout 事件。每个都包含一个链接，并且在 li 中有一些填充。当我将鼠标悬停在 li 上时，会触发 mouseover 事件，但是当我将鼠标悬停在 li 中包含的链接上时， mouseout 和 mouseover 事件都会按顺序触发。似乎子元素正在触发它们的父元素鼠标事件......我该如何阻止它？我希望它在将鼠标悬停在链接上时保持鼠标悬停，而不是每次将鼠标悬停在链接上时都激活动画。这是我的代码；
jQuery(document).ready(function(){
jQuery('#menu li ul').hide();
jQuery('#menu li').mouseover( function() {
jQuery(this).children("ul").show('fast').stop;
return false;
});
jQuery('#menu li').mouseout( function() {
jQuery(this).children("ul").hide('fast').stop;
return false;
});
});
<ul id="menu">
<li><a href="">Some link</a>
<ul>Sub content</ul>
</li>
</ul>
回答by Stephen Belanger
It seems I've found the answer to my own question. For anyone who might have the same problem; try this code instead. It seems hover doesn't bubble into child elements like the other mouse events do.
看来我已经找到了我自己问题的答案。对于任何可能有同样问题的人；试试这个代码。似乎悬停不会像其他鼠标事件那样冒泡到子元素中。
jQuery('#menu li').hover(
function() {
jQuery(this).children('ul').show('fast');
return false;
},
function() {
jQuery(this).children('ul').hide('fast');
return false;
}
);
回答by James
Use "event.stopPropagation()" to stop the events from bubbling upwards:
使用“ event.stopPropagation()”来阻止事件向上冒泡：
jQuery('#menu li a').mouseover( function(evt) {
evt.stopPropagation();
return false;
});
jQuery('#menu li a').mouseout( function(evt) {
evt.stopPropagation();
return false;
});
Alternatively use the mouseenterand mouseleaveevents instead of mouseover/out. jQuery normalizes their behaviour across browsers and these events have the benefit of not bubbling...
或者使用mouseenter和mouseleave事件而不是 mouseover/out。jQuery 规范了它们跨浏览器的行为，这些事件的好处是不会冒泡......
回答by dug
I was looking for the equivelant behavior in JS where in AS3 you can put:
我正在寻找 JS 中的等效行为，您可以在 AS3 中放置：
object.mouseenabled = false;
The way I found that works pretty well is to use CSS and put:
我发现效果很好的方法是使用 CSS 并放置：
.element { pointer-events: none; }
(but I guess that only works if you don't need the element for anything at all. I use it for tooltips that pop up on hover, but don't want it to act weird when you move your mouse away).
（但我想这仅在您根本不需要任何元素的情况下才有效。我将它用于悬停时弹出的工具提示，但不希望当您将鼠标移开时它表现得奇怪）。
回答by podeig
You can try this
你可以试试这个
$('#menu li').live('mouseenter mouseleave', function (e) {
if (e.type == 'mouseenter') {
//Show ul
} else {
//Hide ul
}
});
The advantage is a usage of event delegation. Good luck!
优点是使用了事件委托。祝你好运！
回答by Tomas Aschan
Use css classes to distinguish the different menu levels. You can then easily search for one class or the other in your jQuery selectors.
使用 css 类来区分不同的菜单级别。然后，您可以轻松地在 jQuery 选择器中搜索一个类或另一个类。
