0

こんにちは: 親要素に mouseout イベントを追加すると、そのすべての子要素もこのイベントに追加されるようです。イベントがマウス クリックなどの場合はうまく機能します。

ただし、マウスアウト イベントの場合、予期しない結果が発生します。

次の例を見てください。

<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 つだけが必要です。

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

4

1 に答える 1

0

私の知る限り、これは Internet Explorer でのみサポートされています。

Javascript ツールキットが解決策を提供する場合があります。たとえば、 jQueryはそのイベントをエミュレートします。

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

于 2010-11-01T14:19:17.713 に答える