mouseout，mouseover与mouseenter，mouseleave的区别

最新推荐文章于 2023-05-18 11:37:38 发布

wuyan_xingchen

最新推荐文章于 2023-05-18 11:37:38 发布

阅读量135

点赞数

文章标签： js

本文链接：https://blog.csdn.net/wuyan_xingchen/article/details/106585728

版权

mouseout，mouseover

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="demo1" style="width: 300px;height: 300px;background: red;">
        <div id='demo2' style="width: 150px;height: 150px;background: blue;"></div>
    </div>
    <script>
        demo1=document.querySelector('#demo1')
        demo2=document.querySelector('#demo2')
        demo1.onmouseover=function(){
            console.log('进来了');
            
        }
        demo1.onmouseout=function(){
            console.log('出去了');
            
        }


        //demo1.οnmοuseenter=function(){
        //  console.log('进来了'); 
        //}
        //demo1.οnmοuseleave=function(){
        //    console.log('出去了');    
        //}
    </script>
  </body>
</html>

鼠标正常进入demo1时会只打印 ‘进来了’
鼠标正常移除demo1时会只打印 ‘出去了’
当鼠标进入demo2时会先打印 ‘出去了’，在打印 ‘进来了’
这两个事件会当受当前元素的子元素影响，从而影响判断

mouseenter，mouseleave

而这个两个事件则不会受到子元素，所以平常使用时建议使用这两个避免出现问题

wuyan_xingchen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mouseout，mouseover与mouseenter，mouseleave的区别

mouseout，mouseover<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> &
复制链接

扫一扫