There is an urgent issue regarding the triggering timing of the mouse-out event when there are child elements in a div! _html/css_WEB-ITnose

There is a layer outside with child elements inside. ul li
I want to capture the mouse out event of the layer (div). Unexpectedly, it is also triggered when the mouse moves over the child elements in the layer! !

Please ask:
1: Is this normal?
2: I don’t want this (that is, not triggering the removal event), what should I do?
Thank you! !

<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>

Reply to discussion (solution)

Is it clear?

Let’s briefly describe it:
The requirement is that as long as the mouse does not move outside the scope of the layer (including moving to sub-elements within the layer), the mouseout event of the layer will not be triggered!
Now the situation is that moving to the child elements within the layer also triggers the mouse out event! !

Solution http://xuganggogo.javaeye.com/blog/538476

Thank you (providing ideas), the problem is solved, accept the points!

Another solution is adopted:

<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>

Thank you for sharing, okay~