如何禁用由子元素触发的 mouseout 事件? [英] How to disable mouseout events triggered by child elements?

问题描述

让我详细描述一下问题:

我想在悬停在元素上时显示绝对定位的 div.这对 jQuery 来说真的很简单，而且工作得很好.但是当鼠标经过其中一个子元素时，它会触发包含 div 的 mouseout 事件.悬停子元素时，如何防止 javascript 触发包含元素的 mouseout 事件.

使用 jQuery 做到这一点的最佳和最短方法是什么?

这是一个简单的例子来说明我的意思:

HTML:

Hover Me<div><输入>测试</输入><选择><option>选项1</option><option>选项2</option></选择>

Javascript/jQuery:

$('a').hover( function() { $(this).next().show() }function() { $(this).next().hide() } );

解决方案

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

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

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

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

Let me describe the problem in details:

I want to show an absolute positioned div when hovering over an element. That's really simple with jQuery and works just fine. But when the mouse goes over one of the child elements, it triggers the mouseout event of the containing div. How do I keep javascript from triggering the mouseout event of the containing element when hovering a child element.

What's the best and shortest way to do that with jQuery?

Here is a simplified example to illustrate what I mean:

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() } );

解决方案

The question is a bit old, but I ran into this the other day.

The simplest way to do this with recent versions of jQuery is to use the mouseenter and mouseleave events rather than mouseover and mouseout.

You can test the behavior quickly with:

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

这篇关于如何禁用由子元素触发的 mouseout 事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！