Heim > Web-Frontend > HTML-Tutorial > 关于div内有子元素时,其鼠标移出事件的触发时机问题急!_html/css_WEB-ITnose

关于div内有子元素时,其鼠标移出事件的触发时机问题急!_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:12:44
Original
1142 Leute haben es durchsucht

外面是一个层,里面有子元素,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>
Nach dem Login kopieren


回复讨论(解决方案)

不知说清楚没有?

再简述一下:
要求是,只要鼠标不移出层的范围外(包括移到层内的子元素上),都不触发层的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>
Nach dem Login kopieren

<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>
Nach dem Login kopieren

谢谢楼主分享,么么~

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage