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

问题描述

让我详细描述问题：

当我将鼠标悬停在一个元素上时，我想显示一个绝对定位的div。这很简单，jQuery和工作正常。但是当鼠标跳过其中一个子元素时，它会触发包含div的mouseout事件。悬停子元素时，如何防止javascript触发含有元素的mouseout事件。

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.

使用jQuery最好和最短的方法是什么？

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：

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.

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

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

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