zoukankan      html  css  js  c++  java
  • mouseover,mouseout,mouseenter,mouseleave的区别

    相信做前端开发的都听说过“冒泡型事件”吧,《JavaScript高级程序设计》第九章有详细的讲述,但是,在学习的时候一知半解,也没详细去理解,导致最近在工作中碰到了问题:有许多 li 标签,标签上有2个按钮,当且仅当鼠标移入 li 时才会显示上面的2个按钮,如下图,左边是默认状态,右边是鼠标移入状态,开始使用的是 mouseover 和 mouseout ,结果鼠标移动到按钮上时,按钮会出现闪烁的情况。

        

    后来对比了mouseover,mouseout,mouseenter,mouseleave的区别发现,mouseover 和 mouseout 在鼠标移入移出时会触发其父级元素的 mouseover,mouseout 方法,而 mouseenter,mouseleave 只会触发当前鼠标移入和移出元素的方法。换句话说,后两者是不冒泡的事件,前两者是会冒泡的事件。

    下面是实验详细:

    <div id="mouseEventTest">
        <span id="parent">aaaaaaaaaaaaaaa<span id="child">bbbbbbbbbb</span></span>
    </div>

    页面如下:

    简单的css代码:

    span{
        padding: 10px;
        width: auto;
        line-height: 30px;
    }

    parent 和 child 的 mouseover,mouseout,mouseenter,mouseleave 方法如下:

        function parentMouseOver(e) {
            console.log('parentMouseOver');
        }
        function parentMouseOut(e) {
            console.log('parentMouseOut');
        }
        function childMouseOver(e) {
            console.log('childMouseOver');
        }
        function childMouseOut(e) {
            console.log('childMouseOut');
        }
        function parentMouseEnter(e) {
            console.log('parentMouseEnter');
        }
        function parentMouseLeave(e) {
            console.log('parentMouseLeave');
        }
        function childMouseEnter(e) {
            console.log('childMouseEnter');
        }
        function childMouseLeave(e) {
            console.log('childMouseLeave');
        }

    分别设置两组绑定:

    1)mouseover,mouseout

        $("#parent").bind('mouseover',parentMouseOver);
        $("#parent").bind('mouseout',parentMouseOut);
        $("#child").bind('mouseover',childMouseOver);
        $("#child").bind('mouseout',childMouseOut);

    2)mouseenter,mouseleave

        $("#parent").bind('mouseenter', parentMouseEnter);
        $("#parent").bind('mouseleave', parentMouseLeave);
        $("#child").bind('mouseenter', childMouseEnter);
        $("#child").bind('mouseleave', childMouseLeave);

    操作方式是:鼠标从 parent 左边移入,然后从右边移出。

    绑定的结果如下:

    1)组(四个红框分别是:进入 parent ,从 parent 到 child ,从 child  到 parent ,移出 parent):

           

    2)组:

        

    实验结果可以清晰地看出 mouseover,mouseout,mouseenter,mouseleave 的区别。

  • 相关阅读:
    Select2插件ajax方式加载数据并刷新页面数据回显
    转 proguard 混淆工具的用法 (适用于初学者参考)
    转 【Android】- Android与html5交互操作
    转 android开发笔记之handler+Runnable的一个巧妙应用
    转 Android 多线程:手把手教你使用AsyncTask
    转 android design library提供的TabLayout的用法
    转 Android Lifecycle、ViewModel和LiveData
    转 onSaveInstanceState()和onRestoreInstanceState()使用详解
    转 MessageDigest来实现数据加密
    转 GSON
  • 原文地址:https://www.cnblogs.com/ntt1219/p/3310082.html
Copyright © 2011-2022 走看看