JQuery mouseover mouseout && mouseenter mouseleave 的区别

时间 2019-11-08

标签 jquery mouseover mouseout mouseenter mouseleave 区别栏目 JQuery 繁體版

原文原文链接

用交互操做中，常常须要知道用户操做鼠标是否有移到元素内部或是元素外部，所以jQuery提供了一个mouseenter和mouseleave的快捷方法能够监听用户移动到内部的操做javascript

使用上很是简单，三种参数传递方式与mouseover和mouseout是如出一辙的，因此这里再也不重复，主要讲讲区别，下面以mouseenter为例：html

mouseenter JavaScript事件是Internet Explorer专有的。因为该事件在平时颇有用，jQuery的模拟这一事件，以便它可用于全部浏览器。该事件在鼠标移入到元素上时被触发。任何HTML元素均可以接受此事件。java

mouseenter事件和mouseover的区别 jquery

关键点就是：冒泡的方式处理问题

简单的例子：浏览器

mouseover为例：ui

<div class="aaron2">
    <p>鼠标离开此区域触发mouseleave事件</p>
</div>

若是在p元素与div元素都绑定mouseover事件，鼠标在离开p元素，可是没有离开div元素的时候，触发的结果:spa

p元素响应事件
div元素响应事件

这里的问题是div为何会被触发？缘由就是事件冒泡的问题，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，若是父元素有mouseover事件就会被触发code

因此在这种状况下面，jQuery推荐咱们使用 mouseenter事件htm

mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发。

参考 https://www.cnblogs.com/wymbk/p/5711715.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left div,
    .right div {
        width: 350px;
        height: 150px;
        padding: 5px;
        margin: 5px;
        border: 1px solid #ccc;
    }
    p{
        height: 50px;
        border: 1px solid red;
        margin: 30px;
    }
    .left div {
        background: #bbffaa;
    }
    .right div {
        background: yellow;
    }
    </style>
    <script src="jquery-3.3.1.js"></script>
</head>

<body>
    <h2>.mouseover()方法</h2>
    <div class="left">
        <div class="aaron1">
            <p>鼠标离开此区域触发mouseover事件</p>
            <a>mouseover事件触发次数：</a><br/>
            <a>mouseover冒泡事件触发次数：</a>
        </div>
    </div>

    <h2>.mouseenter()方法</h2>
    <div class="right">
        <div class="aaron2">
            <p>鼠标进入此区域触发mouseenter事件</p>
            <a>mouseenter事件触发次数：</a><br/>
            <a>mouseenter冒泡事件触发次数：</a>
        </div>
    </div>
    <br/>
   
    
    <script type="text/javascript">

        var i = 0;
        $(".aaron1 p").mouseover(function(e) {
            $(".aaron1 a:first").html('mouseover事件触发次数：' + (++i))
        })

        var n = 0;
        $(".aaron1").mouseover(function() {
            $(".aaron1 a:last").html('mouseover冒泡事件触发次数：' + (++n))
        })


    </script>


    <script type="text/javascript">

        var i = 0;
        $(".aaron2 p").mouseenter(function(e) {
            $(".aaron2 a:first").html('mouseenter事件触发次数：' + (++i))
        })

        var n = 0;
        $(".aaron2").mouseenter(function() {
            $(".aaron2 a:last").html('mouseenter冒泡事件触发次数：' + (++n))
        })

    </script>


</body>

</html>