一尘不染

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

javascript

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

我想在悬停在元素上时显示绝对定位的 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() } );

阅读 125

收藏
2022-06-30

共1个答案

一尘不染

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

使用最新版本的 jQuery 执行此操作的最简单方法是使用mouseenterandmouseleave事件而不是mouseoverand mouseout

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

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