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: 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，将新显示的内容放在鼠标悬停事件所绑定的元素内：

<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

是的，大家使用 .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 http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29

基本上，您需要在子DOM节点中捕获事件，然后停止它们在DOM树中向上传播。另一种方法，虽然不建议使用（因为它可能会严重干扰您页面上现有的事件），是将事件捕获设置为页面上的特定元素，它将接收所有事件。这对于DnD行为等非常有用，但绝对不适合您的情况。

Answer 5

我只是检查鼠标坐标是否在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
    }
}

代码精简以提高可读性，不能直接使用。

Answer 6

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

Answer 7

我同意Ryan的观点。

你的问题是“next” div 不是 A 的“child”。 HTML 或 jQuery 不知道你的“a”元素与 DOM 中的子 div 相关联。将它们包装并在包装器上放置悬停意味着它们相关联。

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

Answer 8

我通常看到的处理方式是在从悬停元素移动鼠标时延迟约1/2秒。当将鼠标移动到悬停元素中时，您会想要设置某些变量，表示您正在悬停在元素上，并且如果设置了此变量，则基本停止隐藏悬停部分。然后，您必须从悬停元素添加类似的OnMouseOut隐藏功能，以使其在删除鼠标时消失。很抱歉我不能给您任何代码或更具体的内容，但我希望这可以指引您走向正确的方向。

Answer 9

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

我只想指出mouseover/mouseout和mouseenter/mouseleave之间的区别。你可以在这里阅读一个很棒且有益的解释（前往页面底部查看工作演示）。当你使用mouseout时，即使鼠标进入另一个元素（即使是子元素），事件也会停止。另一方面，当您使用mouseleave时，鼠标经过子元素时不会触发事件，这是OP想要实现的行为。

友情链接