回答:
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