javascript - onmouseover事件会执行多次（应该和事件冒泡没关系吧）-PHP中文网问答

不愿复制粘贴的点这里

把源码也贴出来吧

 <p id="container" style="width:200px;height:200px;background:blue;">
        <p id="child" style="width:100px;height:100px;background:red;">
        </p>
    </p>
    <script type="text/javascript">
        var container=document.getElementById("container");
        container.onmouseover=function(){
            var val=200,that=this;;
           setInterval(function(){
                if(val<2000){
                    setWidth(that,val);
                    val+=10;
                }
           },100);
        }
        function setWidth(obj,val){
            return obj.style.width=parseInt(val)+"px";
        }
    </script>

把鼠标放在p#container（除p#child以外的区域）上正常触发onmouseover事件，但是这里再把鼠标移到p#child上就又会触发一次
onmouseover事件（想想确实是这样哈），两次事件同时执行，顿时就亮瞎眼了。平时都用jquery，还真没发现这种问题，果然站在巨人的肩膀上就是好啊。

上面这个问题算了解决了，再问一个关于事件冒泡的新问题

这个例子中，我addEventListener()的第三个参数都设为true，也就是都在捕获阶段绑定事件处理函数，这应该不同于冒泡阶段绑定事件处理函数吧。所以按道理点击p#child的时候应该是先触发p#container的点击事件，再触发p#child的点击事件吧？然而现实却是相关的，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
      <p id="container" style="width:200px;height:200px;background:blue;">
        <p id="child" style="width:100px;height:100px;background:red;">
        </p>
    </p>
    <script type="text/javascript">
        var container=document.getElementById("container");
        container.addEventListener("click",function(){
            alert("I am parent!"),true
        })

         child.addEventListener("click",function(){
            alert("I am child!"),true
        })
    </script>
</body>
</html>

全部回复(4)

怪我咯2017-04-11 10:01:10 4楼

这事还真和事件冒泡有关系，看看这个（记得按 F12 把开发者工具的控制台打开）

https://jsfiddle.net/f7920oqd/

mouseover 在鼠标移入 container 和 child 的时候都会触发
mouseenter 只有在刚进入 container 的时候触发，移入移出 child 都不会触发。

赞 +0

添加回复

黄舟2017-04-11 10:01:10 3楼

谢邀。你可以把mouseover和mouseout都写上，可以看到，会在移动到child上出现多次触发。这个不管是原生还是jquery都会出现问题。jquery提供了mouseenter和mouseleave这个不会出现上述问题

巴扎黑2017-04-11 10:01:10 2楼

正是因为mouseover事件是冒泡的，它的定义是在鼠标在一个元素上方进入到另一个元素内就会触发，这里另一个元素有可能是内部元素也可以是外部元素，所有在进入一个元素内部的元素时也会触发。
可以使用mouseenter代替，mouseenter不冒泡，只在鼠标元素首次移入元素内触发，移动到这个元素的后代元素上不会重复触发。

更新：
addEventListener用法：
addEventListener(name,function,boolean);
ture是第三个参数，写在function里面算怎么回事？
建议题主好好看看api,再写代码，不然总会遇到这种问题。

巴扎黑2017-04-11 10:01:10 1楼

该情况就是mouseover事件是冒泡的导致。mouseover

The mouseover event is fired when a pointing device is moved onto the element that has the listener attached or onto one of its children.

你将事件绑定给了父级，它会帮你把子元素一起监听。
jquery 的 mouseover也有相同情况。

mouseenter 和 mouseover 的区别

我英语拙计，demo好懂。题主自行查看。