div 内に子要素がある場合のマウスアウトイベントのトリガータイミングに関して緊急の問題があります。 _html/css

div 内に子要素がある場合のマウスアウトイベントのトリガータイミングに関して緊急の問題があります。 _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:12:44

オリジナル

1113 人が閲覧しました

外側にレイヤーがあり、内側に子要素があります。ul li
レイヤー (div) のマウスアウトイベントをキャプチャしたいのですが、マウスが子要素の上を移動したときにもトリガーされるとは予想していませんでしたレイヤーで！！

質問してください:
1: これは正常ですか?
2: これは望ましくない (つまり、削除イベントをトリガーしない) 場合はどうすればよいですか?
ありがとう！！

<div style="left:300px;width:150px;border:solid 1px red;" onmouseout="alert('出了层');">    <ul style="border:solid 1px blue;">        <li style="border:solid 1px yellow;">这是ul li1</li>        <li style="border:solid 1px yellow;">这是ul li2</li>    </ul><div>

ログイン後にコピー

ディスカッションへの返信 (解決策)

分かりましたか?

簡単に説明しましょう:
要件は、マウスがレイヤーのスコープ外に移動しない限り (レイヤー内のサブ要素への移動を含む)、レイヤーの Mouseout イベントはトリガーされないということです。
これで、レイヤー内の子要素に移動すると、マウスアウトイベントもトリガーされるという状況になります。！

解決策 http://xuganggogo.javaeye.com/blog/538476

(アイデアの提供) ありがとうございます。問題は解決しました。ポイントを受け入れてください。

別の解決策が採用されています:

<script type="text/javascript">       function mOut(e)        {            e = e || window.event;            o = e.relatedTarget||e.toElement;            while(o.parentNode&&o.id!='div1'){            o=o.parentNode;            }            if(o.id!='div1')             {                alert("移出了层");            }        }            $(document).ready(function(){    });    </script>

ログイン後にコピー

<div id="div1" style="left:300px;width:150px;height:200px;border:solid 1px red; background-color:Gray;" onmouseout="mOut(event);">    <div style="background-color:Yellow;width:100px;height:100px;"><div style="background-color:Red;width:50px;height:50px;"></div></div></div>

ログイン後にコピー

共有してくれてありがとう、わかりました~