回答:
mouseleaveイベントは、イベントバブリングの処理方法がmouseoutと異なります。この例でマウスアウトを使用した場合、マウスポインターがInner要素の外に移動すると、ハンドラーがトリガーされます。これは通常望ましくない動作です。一方、mouseleaveイベントは、子孫ではなく、バインドされている要素からマウスが離れたときにのみハンドラーをトリガーします。したがって、この例では、マウスはOuter要素から離れたときにトリガーされますが、Inner要素からは離れません。
がのmouseout
選択よりも良い場合がありますmouseleave
。
たとえば、の要素の横に表示するツールチップを作成したとしますmouseenter
。setTimeout
ツールチップがすぐにポップアップするのを防ぐために使用します。mouseleave
使用時にタイムアウトをクリアしてclearTimeout
、マウスがツールチップを離れた場合にツールチップが表示されないようにします。これは99%の確率で機能します。
しかし、今あなたがに接続ツールチップを持っている要素が付いたボタンであるとしましょうclick
イベント、とのも、このボタンはどちらかとユーザープロンプトを想定してみましょうconfirm
か、alert
ボックスをオンにします。ユーザーがボタンをクリックすると、alert
火災が発生します。ユーザーがすばやく押して、ツールチップにポップアップが表示されないようにしました(これまでのところ良好です)。
ユーザーがalert
ボックスの[OK]ボタンを押すと、マウスが要素から離れます。しかし、ブラウザページはロックされた状態になっているため、[OK]ボタンが押されるまでJavaScriptは起動しません。つまり、mouseleave
イベントは発火しません。ユーザーが[OK]を押すと、ツールチップがポップアップします(これは望んだものではありません)。
mouseout
この場合に使用すると、起動するので適切なソリューションです。
mouseout
その場合、なぜ発砲するのか説明してもらえますか?ブラウザーはまだロックされた状態ではmouseout
ないでしょうか?
jQuery APIドキュメント:
mouseout
このイベントタイプでは、イベントのバブリングが原因で多くの問題が発生する可能性があります。たとえば、この例では、マウスポインターがInner要素の外に移動すると、それにmouseoutイベントが送信され、次にOuterに細流されます。これにより、不都合なときにバインドされたマウスアウトハンドラーをトリガーできます。有用な代替案については、.mouseleave()の説明を参照してください。
だから、mouseleave
理由は上記の理由により設計されたカスタムイベントは、あります。
イベントMouseoutは、マウスが選択された要素を離れると、マウスがその子要素を離れるとトリガーされます。
イベントMouseleave要素は、ポインターが選択した要素のみを離れるとトリガーされます。
リファレンス:W3School