JavaScript和JQuery的鼠标mouse事件冒泡处理

前端技术 2023/09/04 JavaScript

简单的鼠标移动事件：

进入

复制代码 代码如下:

mouseenter：不冒泡
mouseover: 冒泡

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件

移出

复制代码 代码如下:

mouseleave: 不冒泡
mouseout：冒泡

不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件

我们通过一个案例观察下问题：

给一个嵌套的层级绑定mouseout事件，会发现mouseout事件与想象的不一样

复制代码 代码如下:

<!DOCTYPE html><div class=\"out overout\" style=\"width:40%;height:120px; margin:0 15px;background-color:#D6EDFC;float:left;\" data-mce-style=\"width: 40%; height: 120px; margin: 0 15px; background-color: #d6edfc; float: left;\"><p style=\"border:1px solid red\" data-mce-style=\"border: 1px solid red;\">外部子元素</p><div class=\"in overout\" style=\"width:60%;background-color:#FFCC00;margin:10px auto;\" data-mce-style=\"width: 60%; background-color: #ffcc00; margin: 10px auto;\"><p style=\"border:1px solid red\" data-mce-style=\"border: 1px solid red;\">内部子元素</p><p id=\"inshow\">0</p>
    </div><p id=\"outshow\">0</p>
</div><script type=\"text/javascript\">

    var i = 0;
    var k = 0;

    document.querySelectorAll(\'.out\')[0].addEventListener(\'mouseout\',function(e){
        document.querySelectorAll(\"#inshow\")[0].textContent = (++i)
       e.stopPropagation();
    },false)

   document.querySelectorAll(\'.in\')[0].addEventListener(\'mouseout\',function(){
       document.querySelectorAll(\"#outshow\")[0].textContent = (++k)
    },false)

</script>

本文地址：https://www.stayed.cn/item/11213

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案