如何禁用由子元素触发的 mouseout 事件？

这个问题有点老了，但前几天我遇到了这个问题。

使用最新版本的 jQuery 执行此操作的最简单方法是使用 mouseenter 和 mouseleave 事件而不是 mouseover 和 mouseout。

您可以使用以下方法快速测试行为：

$(".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，但这样做是为了让示例更易于理解。

---

是的，伙计们，使用 .mouseleave 而不是 .mouseout：

$('div.sort-selector').mouseleave(function() {
    $(this).hide();
});

甚至可以将它与 live 结合使用：

$('div.sort-selector').live('mouseleave', function() {
    $(this).hide();
});

---

您正在寻找与 javascript 的防止事件冒泡等效的 jQuery。

看一下这个：

http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29

基本上，您需要在子 DOM 节点中捕获事件，然后停止它们在 DOM 树上的传播。另一种方法，虽然实际上没有被建议（因为它可能会严重干扰页面上的现有事件），但将事件捕获设置为页面上的特定元素，它将接收所有事件。这对于 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
    }
}

为了可读性而减少的代码不能开箱即用。

---

我通过在我的子元素 css 上添加 pointer-events: none; 解决了这个问题

---

我同意瑞恩的观点。

您的问题是“下一个” div 不是 A 的“子”。HTML 或 jQuery 无法知道您的“a”元素与 DOM 中的子 div 相关。包装它们并将鼠标悬停在包装器上意味着它们是关联的。

但请注意，他的代码不符合最佳实践。不要在元素上设置隐藏样式内联；如果用户有 CSS 但没有 javascript，则元素将隐藏并且无法显示。更好的做法是将该声明放在 document.ready 事件中。

---

我通常看到的处理方式是在将鼠标从 HoverMe 元素移动之间有大约 1/2 秒的延迟。将鼠标移动到悬停的元素中时，您需要设置一些变量来表示您正在悬停在元素上，然后如果设置了此变量，则基本上停止悬停的部分隐藏。然后，您必须从悬停的元素中添加类似的隐藏函数 OnMouseOut，以使其在您移开鼠标时消失。对不起，我不能给你任何代码，或者更具体的东西，但我希望这能为你指明正确的方向。

---

这是一个古老的问题，但它永远不会过时。正确答案应该是bytebrite给出的那个。

我只想指出 mouseover/mouseout 和 mouseenter/mouseleave 之间的区别。您可以阅读一个非常有用的解释 here（转到页面最底部的工作演示）。当您使用 mouseout 时，事件会在鼠标进入另一个元素时停止，即使它是子元素也是如此。另一方面，当您使用 mouseleave 时，当鼠标悬停在子元素上时不会触发事件，这是 OP 想要实现的行为。

---