Question

让我详细描述一下这个问题：

我希望在悬停在元素上时显示绝对定位的div。使用jQuery非常简单，工作得很好。但是当鼠标移过其中一个子元素时，它会触发包含div的mouseout事件。在悬停子元素时，如何防止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() } );

Answer 1

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

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

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

$(".myClass").on( {
   'mouseenter':function() { console.log("enter"); },
   'mouseleave':function() { console.log("leave"); }
});

Answer 2

为简单起见，我只是重新组织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，但这样做是为了让示例更容易理解。

Answer 3

Yeap，伙计们，使用.mouseleave代替.mouseout：

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

甚至可以与live结合使用：

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

Answer 4

你正在寻找jQuery相当于javascript的阻止事件冒泡。

检查出来：

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

基本上你需要在子DOM节点中捕获事件，并且阻止它们在DOM树中传播。另一种方法，虽然真的没有建议（因为它可能会严重破坏页面上的现有事件），但是将事件捕获设置为页面上的特定元素，它将接收所有事件。这对DnD行为很有用，但绝对不适合你的情况。

Answer 5

我只是检查鼠标坐标是否在mouseout-event中的元素之外。

它可以工作但是很多代码都是这么简单的事情:(

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
    }
}

为了便于阅读而减少代码，开箱即用。

Answer 6

我同意瑞恩的观点。

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

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

Answer 7

我通过在我的子元素css

上添加pointer-events: none;来解决此问题

Answer 8

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

Answer 9

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

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

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

9 个答案: