マウスアウトイベントは複数回発生します

StackOverflow https://stackoverflow.com/questions/4069558

  •  28-09-2019
  •  | 
  •  

質問

こんにちは：マウスアウトイベントを親要素に追加すると、このイベントもすべてこのイベントを追加しているようです。イベントがマウスクリックなどでうまく機能します。

ただし、マウスアウトイベントでは、予期せぬ結果が発生します。

この例を見てください：

<html>
    <head>
        <script type="text/javascript">
            function init(){
                document.getElementById('par').onmouseout=function(){alert('mouse out')};
            }
    </script>
    </head>
    <body onload='init()'>
        <div id="par" style="width:400px;height:300px">
            <div style="background-color:red;width:100%;height:150px"></div>
            <div style="background-color:black;width:100%;height:150px"></div>
        </div>
    </body>
</html>

赤いdivから黒いdivに移動してから、黒いdivから出て、2つのアラートウィンドウを取得します。1つだけが欲しいです。

それで、それを修正する方法は？

役に立ちましたか？

解決

それは、Plane JavaScriptを使用して使用することはできません mouseleave イベントは、私の知る限り、Internet Explorerによってのみサポートされています。

JavaScriptツールキットはソリューションを提供する場合があります。 jquery 例えば エミュレート そのイベント：

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top