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

关键词：

【中文标题】如何禁用由子元素触发的 mouseout 事件？【英文标题】：How to disable mouseout events triggered by child elements? 【发布时间】：2010-09-25 22:11:07 【问题描述】：

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

当鼠标悬停在一个元素上时，我想显示一个绝对定位的 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()  );

【问题讨论】：

Without jQuery version 这个问题 【参考方案1】：

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

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

您可以通过以下方式快速测试行为：

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

【讨论】：

帮助了我的非 jquery javascript 相关问题。我在事件监听器中使用 mouseenter/mouseout 而不是 mouseleave！ 为了搜索，这些鼠标事件行为等价于 AS3 中的ROLL_OVER 和ROLL_OUT。 帮我省了些麻烦。奇怪的是，悬停在子元素上会触发父元素的 mouseout 事件，而实际上它仍在父元素内。【参考方案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，但这样做是为了让示例更易于理解。

【讨论】：

这确实是一个非常简单干净的解决方案。谢谢你提醒我。但是在我的具体情况下，这与问题并不完全一样，这不是一个选择。不过谢谢！ 在尝试了其他人在 SO 描述的不同方法后，我回到了你的方法，并使它适用于我的情况。耶！ :-)【参考方案3】：

是的，伙计们，用.mouseleave代替.mouseout：

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

甚至可以与live结合使用：

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

【讨论】：

【参考方案4】：

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

看看这个：

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

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

【讨论】：

这个工作正常，不知道为什么你不能让它工作..只是一个信息，文档链接已更改，新链接是docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29【参考方案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
    

为了便于阅读，代码被删减，不能开箱即用。

【讨论】：

【参考方案6】：

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

【讨论】：

在修复一些遗留代码构建自己的带有 mouseover 和 mouseleave 事件的弹出框时，这真的很有帮助 是的，这是最优雅的解决方案。 但是，它也禁用了点击事件，这不一定是需要的，但它仍然可以。【参考方案7】：

我同意瑞恩的观点。

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

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

【讨论】：

我完全同意将 hide 放在 document.ready 事件中。内联 css 只是为了以最简单的方式传达一个完整的工作示例。我将编辑我的回复以明确说明。【参考方案8】：

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

【讨论】：

是的，我刚刚实施了这样的解决方案。这是一个非常普遍的问题。我真的很好奇还有什么其他的解决方案...谢谢你的回答！【参考方案9】：

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

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

【讨论】：

mouseover和mouseout事件在鼠标经过子元素时也会触发

JavaScript的mouseover和mouseout事件，在绑定元素内部有子元素的情况下，经过绑定元素时会多次触发mouseover和mouseout事件。jQuery解决办法:jquery的mouseenter和mouseleave方法已经修复了这个问题，可以直接用来替代mouseover和mouseout不过有个mo... 查看详情

jq:mouseover和mouseout多次触发解决办法

...有在鼠标指针穿过被选元素时，才会触发mouseenter事件。mouseout与mouseleave　　不论鼠标指针离开被选元素还是任何子元素，都会触发mouseout事件。　　只有在鼠标指针离开被选元素时，才会触发mouseleave事件。 在#a没有子元素的... 查看详情

mouseover，mouseenter，mouseout，mouseleave的区别

...标指针穿过被选元素或其子元素，都会触发mouseover事件。mouseout：不论鼠标指针离开被选元素还是任何子元素，都会触发mouseout事件。 mouseenter：只有在鼠标指针穿过被选元素时，才会触发mouseenter事件。mouseleave：只有在鼠标... 查看详情

几个mouse事件的特点

...r事件,鼠标在进入div到span再出去,会触发1次mouseenter事件;3.mouseout():如果鼠标指针离开任何子元素，同样会触发mouseout事件。注：比如div使用了mouseout事件,鼠标在进入div到span再出去,会触发3次mouseout事件;4.mouseleave():只有在鼠标指针... 查看详情

jquerymouseover与mouseenter,mouseout与mouseleave的区别

...有在鼠标指针穿过被选元素时，才会触发mouseenter事件。mouseout与mouseleave不论鼠标指针离开被选元素还是任何子元素，都会触发mouseout事件。只有在鼠标指针离开被选元素时，才会触发mouseleave事件。 查看详情

mouseover与mouseenter,mouseout与mouseleave的区别

...有在鼠标指针穿过被选元素时，才会触发mouseenter事件。mouseout与mouseleave不论鼠标指针离开被选元素还是任何子元素，都会触发mouseout事件。只有在鼠标指针离开被选元素时，才会触发mouseleave事件。 查看详情

mouseenter与mouseovermouseleave与mouseout之间的区别

...只在穿过被选元素时，才会触发mouseenter事件。mouseleave与mouseout的区别亦同上鼠标指针离开当前元素或者当前元素的子元素时触发事件.鼠标指针只在离开当前元素时才会触发。  查看详情

：事件和动画

...到指定元素的mouseover事件 鼠标指针移过时 子元素有效 mouseout() 触发或将函数绑定到指定元素的mouseout事件 鼠标指针移出时 子元 查看详情

mouseover,mouseout,mouseenter,mouseleave的区别

昨天写了个mouseover、mouseout事件，发现频频闪动，研究半天，最后得出结论 mouseover/mouseout：鼠标经过该元素触发，经过其子元素再次触发mouseenter/mouseleave：只触发一次，不论该元素有多少子元素　所以，使用该类型事件时，... 查看详情

jquery中的事件与动画

...到指定元素的mouseover事件 鼠标指针移过时 子元素有效 mouseout() 触发或将函数绑定到指定元素的mouseout事件 鼠标指针移出时 子元素 查看详情

如何在点击时禁用鼠标悬停事件？

...间】：2011-03-2313:43:42【问题描述】：我正在使用mouseover和mouseout事件，其中将更改mouseover和mouseout上的图像而当用户点击链接时，我们可以禁用mouseout事件，这样相应的函数就不会被调用了吗？<td><ahref="javascript:v 查看详情

事件类型——鼠标事件(代码片段)

...开鼠标左键两个步骤，mousedown仅仅是按下鼠标左键操作，mouseout是松开鼠标左键操作。因此在鼠标操作上click=mousedown+mouseup）mouseenter：鼠标光标从元素外部首次移动到元素范围之内时触发。该事件不冒泡，而且移动到后代元素上... 查看详情

当元素被覆盖时取消 mouseout 事件

】当元素被覆盖时取消mouseout事件【英文标题】：cancellingmouseouteventwhenelementisoverlaid【发布时间】：2011-09-1403:32:23【问题描述】：希望这个JSFiddle比我的话更能说明问题：http://jsfiddle.net/pmwRc/6/当地图悬停时，我在图像地图上显示... 查看详情

jquery如何实现双击事件时不触发单击事件

...件的执行顺序：    单击(click)：mousedown，mouseout，click；　　双击(dblclick)：mousedown，mouseout，click，mousedown，mouseout，click，dblclick；在双击事件(dblclick)，触发的两次单击事件(click)中，第一次的单击事件(click)会被屏... 查看详情

java中如何获取网页中鼠标点击过的事件

...标移入目标元素上方。鼠标移到其后代元素上时会触发。mouseout:鼠标移出目标元素上方。mouseenter:鼠标移入元素范围内触发，该事件不冒泡，即鼠标移到其后代元素上时不会触发。mouseleave:鼠标移出元素范围时触发，该事件不冒... 查看详情

jquery中的常用事件(代码片段)

...事件mouseover():触发或将函数绑定到指定元素的mouseover事件mouseout()：触发或将函数绑定到指定元素的mouseout的事件代码示例：$(function()$("input").click(function()$("li").mouseover(function()$(this).css("background","green&#... 查看详情

当元素被禁用时触发 onmouseover 事件

】当元素被禁用时触发onmouseover事件【英文标题】：Fireonmouseovereventwhenelementisdisabled【发布时间】：2013-08-0910:51:27【问题描述】：当用户没有编辑权限时，我需要禁用一些控件，但有时它们的宽度不足以显示所选选项元素的整个... 查看详情

jquery事件(代码片段)

...事件（2）mouseover()鼠标进入（进入子元素也触发）（3）mouseout()鼠标离开（离开子元素也触发）（4）mouseenter（）鼠标进入（进入子元素不触发）（5）mouseleave（）鼠标离开（离开子元素不触发）（6）hover（）$(function()/*移入，子... 查看详情