絶対に配置された Div 内の子要素で Mouseout イベントがトリガーされないようにするにはどうすればよいですか?

絶対 Div 内の子要素の Mouseout イベントを阻止する: jQuery を使用しない旅

絶対に配置された div 内の onmouseout イベントを処理する特に、div 内の子要素の上にマウスを置いたときにイベントがトリガーされるのを避けたい場合は、注意が必要です。この現象は、イベントが DOM ツリーを伝播し、子孫によってトリガーされた場合でも親要素に影響を与えるメカニズムであるイベント バブリングによって発生します。

この動作を防止し、マウスが操作するときにマウスアウト イベントが発生しないようにするには、子要素を削除するには、このシナリオの救世主である onmouseleave イベントに頼ることができます。 onmouseout とは異なり、onmouseleave は、マウスがその子要素に移動したときではなく、要素自体から出たときにのみトリガーされます。

この解決策の実装は簡単です。絶対に配置された div で onmouseout を onmouseleave に置き換えるだけです。

<div class="outer" onmouseleave="yourFunction()">
  <div class="inner"></div>
</div>

jQuery を好む人のために、mouseleave() メソッドでも同様の機能が提供されます。

$(".outer").mouseleave(function() {
  // your code here
});

このアプローチの有効性をさらに詳しく説明するには、次の例をご覧ください: Example Link.

onmouseleave イベントまたはそれに相当する jQuery を採用することで、効果的に抑制できます。絶対 div 内の子要素との対話がマウスアウト イベントによって中断されるのを防ぎます。

以上が絶対に配置された Div 内の子要素で Mouseout イベントがトリガーされないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。