6.mouseenter与mouseover的区别

2019-10-31 本文已影响0人追马的时间种草

mouseenter与mouseover区别

over属于滑过事件，从父元素进入到子元素，属于离开了父元素，会触发父元素的out，触发子元素的over
enter 属于进入，从父元素进入子元素，并不算离开父元素，不会触发父元素的leave ,触发子元素的enter
enter和leave阻止了事件的冒泡传播，而over和out还存在冒泡传播

所以对于子父元素嵌套这种情况，使用OVER会发生很多不愿意操作的事情，此时我们使用enter会更加简单，操作方便。

以下是over和out事例

<body>
    <style>
        #outer{
            position: absolute;
            top: 30px;
            left: 30px;
            width: 200px;
            height: 200px;
            background:red;
            cursor: pointer;
        }
        #inner{
            position: absolute;
            top: 30px;
            left: 30px;
            width: 100px;
            height: 100px;
            background: #000000;
            cursor: pointer;
        }
    </style>
<div id="outer">
    <div id="inner"></div>
</div>
<script>
    inner.onmouseover=function(){
        console.log('innerover');
    }
    inner.onmouseout=function () {
        console.log('innerout');
    }
    outer.onmouseover=function () {
        console.log('outerenter');
    }
    outer.onmouseout=function () {
        console.log('outerout');
    }
</script>
</body>

当鼠标飘过页面控制台输出

1569485356409.png

以下是enter和leave事例

<body>
    <style>
        #outer{
            position: absolute;
            top: 30px;
            left: 30px;
            width: 200px;
            height: 200px;
            background:red;
            cursor: pointer;
        }
        #inner{
            position: absolute;
            top: 30px;
            left: 30px;
            width: 100px;
            height: 100px;
            background: #000000;
            cursor: pointer;
        }
    </style>
<div id="outer">
    <div id="inner"></div>
</div>
<script>
    inner.onmouseenter=function(){
        console.log('innerover');
    }
    inner.onmouseleave=function () {
        console.log('innerout');
    }
    outer.onmouseenter=function () {
        console.log('outerenter');
    }
    outer.onmouseleave=function () {
        console.log('outerout');
    }
</script>
</body>

当鼠标经过一次控制台输出
- 1569485518315.png

6.mouseenter与mouseover的区别

mouseenter与mouseover区别

猜你喜欢

热点阅读