ホームページ >ウェブフロントエンド >CSSチュートリアル >子要素を持つ絶対位置の div での早すぎる `onmouseout` イベントを防ぐにはどうすればよいですか?

子要素を持つ絶対位置の div での早すぎる `onmouseout` イベントを防ぐにはどうすればよいですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-12-02 16:46:121008ブラウズ

How Can I Prevent Premature `onmouseout` Events on Absolutely Positioned Divs with Child Elements?

Absolute Div の子要素にマウスを置いたときにマウスアウト イベントを防ぐ

問題:

オブジェクト内の子要素にマウスを置いたとき絶対的に配置された div の場合、div の onmouseout イベントが途中でトリガーされます。これは、子要素のイベントが親要素に伝播するイベント バブリングが原因で発生します。

解決策: jQuery を使用しない

子要素をホバーしたときに onmouseout イベントが発生しないようにするには場合は、代わりに onmouseleave イベントを使用してください。以下に例を示します。

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

解決策: jQuery を使用する

jQuery は、同じ機能を実現する Mouseleave() イベントを提供します。

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

どうやって動作:

onmouseleave イベントは、マウスが指定された要素から離れた場合にのみトリガーされます。親 div でこのイベントを使用することにより、マウスが子要素の上にマウスを置いた場合でも、マウスが div から完全に外に出た場合にのみ、mouseout イベントが発生するようになります。

以上が子要素を持つ絶対位置の div での早すぎる `onmouseout` イベントを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。