如何禁用由子元素触发的鼠标输出事件？

javascript jquery events

2022-08-30 05:40:03

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

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

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

下面是一个简化的示例来说明我的意思：

网址：

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

答案 1

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

使用最新版本的 jQuery 执行此操作的最简单方法是使用 and 事件而不是 and 。mouseentermouseleavemouseovermouseout

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

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

答案 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，但这样做是为了让示例更容易消化。