欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

鼠标悬停、鼠标移出、鼠标进入和鼠标离开之间的区别

最编程 2024-05-23 10:48:58
...


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

mouseover，mouseout，mouseenter，mouseleave的区别_高级程序设计   

 mouseover，mouseout，mouseenter，mouseleave的区别_高级程序设计_02

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

下面是实验详细：

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


页面如下：

mouseover，mouseout，mouseenter，mouseleave的区别_前端开发_03

简单的css代码：

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


parent 和 child 的 mouseover，mouseout，mouseenter，mouseleave 方法如下：

mouseover，mouseout，mouseenter，mouseleave的区别_移出_04

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');
    }

mouseover，mouseout，mouseenter，mouseleave的区别_移出_04

分别设置两组绑定：

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

    mouseover，mouseout，mouseenter，mouseleave的区别_高级程序设计_06   

2）组：

    mouseover，mouseout，mouseenter，mouseleave的区别_前端开发_07

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



上一篇： 鼠标悬停和鼠标移出事件中的小错误。

下一篇： 移动和网络前端开发的常见事件

推荐阅读