jQueryのmouseout()とmouseleave()の違いは何ですか?


回答:


101

mouseleaveイベントは、イベントバブリングの処理方法がmouseoutと異なります。この例でマウスアウトを使用した場合、マウスポインターがInner要素の外に移動すると、ハンドラーがトリガーされます。これは通常望ましくない動作です。一方、mouseleaveイベントは、子孫ではなく、バインドされている要素からマウスが離れたときにのみハンドラーをトリガーします。したがって、この例では、マウスはOuter要素から離れたときにトリガーされますが、Inner要素からは離れません。

ソース:http : //api.jquery.com/mouseleave/


1
mouseoverとmouseenter:jsfiddle.net/hejdav/945pv53h/3(マウスアウトとマウスリーブは同等)
hejdav

上記の説明は、両方の方法が機能し、それらの違いが私のために機能したことを確認すると、より明確になります。
invinciblemuffi

15

がのmouseout選択よりも良い場合がありますmouseleave

たとえば、の要素の横に表示するツールチップを作成したとしますmouseentersetTimeoutツールチップがすぐにポップアップするのを防ぐために使用します。mouseleave使用時にタイムアウトをクリアしてclearTimeout、マウスがツールチップを離れた場合にツールチップが表示されないようにします。これは99%の確率で機能します。

しかし、今あなたがに接続ツールチップを持っている要素が付いたボタンであるとしましょうclickイベント、とのも、このボタンはどちらかとユーザープロンプトを想定してみましょうconfirmか、alertボックスをオンにします。ユーザーがボタンをクリックすると、alert火災が発生します。ユーザーがすばやく押して、ツールチップにポップアップが表示されないようにしました(これまでのところ良好です)。

ユーザーがalertボックスの[OK]ボタンを押すと、マウスが要素から離れます。しかし、ブラウザページはロックされた状態になっているため、[OK]ボタンが押されるまでJavaScriptは起動しません。つまり、mouseleaveイベントは発火しません。ユーザーが[OK]を押すと、ツールチップがポップアップします(これは望んだものではありません)。

mouseoutこの場合に使用すると、起動するので適切なソリューションです。


5
mouseoutその場合、なぜ発砲するのか説明してもらえますか?ブラウザーはまだロックされた状態ではmouseoutないでしょうか?
user31782 2016年

10

jQuery APIドキュメント:

mouseout

このイベントタイプでは、イベントのバブリングが原因で多くの問題が発生する可能性があります。たとえば、この例では、マウスポインターがInner要素の外に移動すると、それにmouseoutイベントが送信され、次にOuterに細流されます。これにより、不都合なときにバインドされたマウスアウトハンドラーをトリガーできます。有用な代替案については、.mouseleave()の説明を参照してください。

だから、mouseleave理由は上記の理由により設計されたカスタムイベントは、あります。

http://api.jquery.com/mouseleave/


3

イベントMouseoutは、マウスが選択された要素を離れると、マウスがその子要素を離れるとトリガーされます。

イベントMouseleave要素は、ポインターが選択した要素のみを離れるとトリガーされます。

リファレンス:W3School

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.