老师,为什么这里鼠标从父盒子移到子盒子里面也会触发mouseout呢?
1 | <!DOCTYPE html><br><html lang="en"><br><br><head><br> <meta charset="UTF-8"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <title>Document</title><br> <style><br> .parent {<br> width: 200px;<br> height: 200px;<br> border: 1px solid #000;<br> }<br><br> .child {<br> width: 100px;<br> height: 100px;<br> background-color: #f00;<br> }<br> </style><br></head><br><br><body><br> <div class="parent"><br> <div class="child">child</div><br> </div><br> <script><br> var parentEle = document.querySelector(".parent")<br> var childEle = document.querySelector(".child")<br><br> parentEle.onmouseout = function (e) {<br> console.log("parent的onmouseout事件被触发了", e.target)<br> }<br> </script><br> </body><br><br></html><br> |
源自：DOM
4-22 事件委托（2）
27
收起
正在回答
3回答
同学你好，可以类比作堆积木，放在下方的是父元素，放在上方的是子元素。从上往下看，被上方遮挡的下面的积木是看不到的。
同学记住onmouseout这个事件，在鼠标移出父元素或其子元素时，onmouseout会被触发，当鼠标从父元素移入其子元素时，onmouseout也会被触发就可以了。
祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧