如何禁用子元素触发的鼠标事件？
让我详细描述这个问题：
我想显示一个绝对定位的div时，hover在一个元素。 这对于jQuery来说非常简单，而且工作得很好。 但是当鼠标移过其中一个子元素时，会触发包含div的mouseout事件。 hover子元素时，如何保持javascript不触发包含元素的mouseout事件。
什么是最好的和最短的方式来做到这一点与jQuery？
下面是一个简单的例子来说明我的意思：
HTML：
<a>Hover Me</a> <div> <input>Test</input> <select> <option>Option 1</option> <option>Option 2</option> </select> </div> 使用Javascript / jQuery的：
$('a').hover( function() { $(this).next().show() } function() { $(this).next().hide() } );
问题有点老，但是前几天我碰到了。
最近版本的jQuery最简单的方法是使用mouseenter和mouseleave事件，而不是mouseover和mouseout 。
您可以使用以下方法快速testing行为：
$(".myClass").on( { 'mouseenter':function() { console.log("enter"); }, 'mouseleave':function() { console.log("leave"); } });
为了简单起见，我只是重新组织一下html，把新显示的内容放在mouseover事件绑定的元素中：
<div id="hoverable"> <a>Hover Me</a> <div style="display:none;"> <input>Test</input> <select> <option>Option 1</option> <option>Option 2</option> </select> </div> </div>
然后，你可以做这样的事情：
$('#hoverable').hover( function() { $(this).find("div").show(); }, function() { $(this).find("div").hide(); } );
注意：我不推荐内联css，但是这样做是为了让示例更容易消化。
Yeap，伙计们，用.mouseleave代替.mouseout ：
$('div.sort-selector').mouseleave(function() { $(this).hide(); });
甚至可以将它与live结合使用：
$('div.sort-selector').live('mouseleave', function() { $(this).hide(); });
您正在寻找jQuery等效的JavaScript的防止事件冒泡。
看一下这个：
http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29
基本上你需要在子DOM节点中捕获事件，并在那里停止它们在DOM树上的传播。 另一种方式，虽然真的没有build议（因为它可以严重混乱你的网页上的现有事件），是设置事件捕获到页面上的特定元素，它会收到所有的事件。 这对于DnD行为是有用的，但绝对不适合你的情况。
我只是简单地检查鼠标坐标是否在mouseout事件的元素之外。
它的作品，但它是这么简单的东西的代码很多:(
function mouseOut(e) { var pos = GetMousePositionInElement(e, element); if (pos.x < 0 || pos.x >= element.size.X || pos.y < 0 || pos.y >= element.size.Y) { RealMouseOut(); } else { //Hit a child-element } }
为了可读性而减less代码，将不会在现成的情况下工作。
我同意瑞安。
你的问题是，“下一个”div不是A的“孩子”。HTML或jQuery没有办法知道你的“a”元素与DOM中的子div相关。 将它们包装起来，并将其hover在包装上意味着它们相关联。
请注意，他的代码不符合最佳实践。 不要在元素上设置隐藏的样式; 如果用户有CSS，但没有JavaScript，元素将隐藏，将无法显示。 更好的做法是将该声明放在document.ready事件中。
我通常看到的处理方式是在从HoverMe元素移动鼠标之间延迟约1/2秒。 将鼠标移动到hover的元素中时，您需要设置一些variables，指示您将元素hover，然后基本停止隐藏的部分，如果设置了此variables。 然后，您必须添加一个类似的隐藏function从hover元素OnMouseOut使其消失，当您删除鼠标。 对不起，我不能给你任何代码，或更具体的东西，但我希望这个指向正确的方向。
这是一个古老的问题，但它永远不会过时。 正确的答案应该是由bytebrite给出的答案 。
我只想指出mouseover / mouseout和mouseenter / mouseleave之间的区别。 你可以在这里阅读一个很好的和有用的解释（去工作演示页面的最底部）。 当你使用mouseout ，当鼠标进入另一个元素时，即使它是一个子元素，事件也会停止。 另一方面，当你使用mouseleave ，当鼠标移过一个子元素时，这个事件不会被触发，这就是OP想要实现的行为。
我通过添加pointer-events: none;解决了这个问题pointer-events: none; 在我的孩子的元素CSS
