• 理解mouseover,mouseout,mouseenter,mouseleave


    mouseover定义和用法

    当鼠标指针位于元素上方时,会发生 mouseover 事件。

    该事件大多数时候会与 mouseout 事件一起使用。

    mouseover() 方法触发 mouseover 事件,或规定当发生 mouseover 事件时运行的函数。

    注释:与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。

     <div class="parent">父亲
                <div class="child">儿子<span></span></div>
    </div>
    
    <script type="text/javascript">
                 $(function(){
                     var x=1;
                     $(".parent").mouseover(function(){
                         $(".parent span").text(++x);
                     });
                      $(".parent").mouseout(function(){
                         $(".parent span").text(++x);
                     });
                 });
    </script>
    

     

    当鼠标在父亲容器和父亲外容器之间切换时里面的值每次只会加1,当鼠标在父亲容器和儿子容器之间切换时,里面的值每次会加2,因为不论鼠标指针穿过被选元素或其子元素都会触发mouseover,mouseout同理。

    mouseenter定义和用法

    当鼠标指针穿过元素时,会发生 mouseenter 事件。

    该事件大多数时候会与 mouseleave 事件一起使用。

    mouseenter() 方法触发 mouseenter 事件,或规定当发生 mouseenter 事件时运行的函数。

    注释:与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。

    <script type="text/javascript">
                 $(function(){
                     var x=1;
                     $(".parent").mouseenter(function(){
                         $(".parent span").text(++x);
                     });
                      $(".parent").mouseleave(function(){
                         $(".parent span").text(++x);
                     });
                 });
    </script>
    

     只有当鼠标经过父亲容器的时候才会触发,经过儿子容器是没有反应的,mouseleave同样,只有离开父亲容器的时候才会促发。

    但是有个问题,当用绝对定位让儿子容器偏离父亲元素的覆盖面积时,效果上mouseenter跟mouseover情况一样了:

    <style type="text/css">
                .parent{
                    position: relative;
                    150px;
                    height:150px;
                    background: red;
                }
                .child{
                    position: absolute;
                    top:160px;
                    left:160px;
                    100px;
                    height:100px;
                    background: yellow;
                }
     </style>
    
    <script type="text/javascript">
                 $(function(){
                     var x=1;
                     $(".parent").mouseenter(function(){
                         $(".parent span").text(++x);
                     });
                      $(".parent").mouseleave(function(){
                         $(".parent span").text(++x);
                     });
                 });
    </script>
    

     

    使用mouseenter,鼠标在儿子容器上面经过时也会触发mouseenter,原因是这时候鼠标进入儿子容器的时候实际上就是进入了父亲容器。

  • 相关阅读:
    JS简单实现滚动自动加载新内容(懒加载)
    npm install报错Unhandled rejection RangeError: Maximum call stack size exceededill install
    原生CSS设置网站主题色—CSS变量赋值
    JS将日期转为距现在的时间长度
    JS将日期转为距现在的时间长度
    axios简单理解
    axios简单理解
    简单配置umiJS学习笔记
    npm install 提示权限不足 Error: EPERM: operation not permitted, unlink XXX
    基于实体模型开发主题管理简析
  • 原文地址:https://www.cnblogs.com/hutuzhu/p/3725641.html
Copyright © 2020-2023  润新知