javascript - onmouseover事件会执行多次（应该和事件冒泡没关系吧）
本文介绍了javascript - onmouseover事件会执行多次（应该和事件冒泡没关系吧）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
不愿复制粘贴的点这里
把源码也贴出来吧
<div id="container" style="width:200px;height:200px;background:blue;">
<div id="child" style="width:100px;height:100px;background:red;">
</div>
</div>
<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>把鼠标放在div#container（除div#child以外的区域）上正常触发onmouseover事件，但是这里再把鼠标移到div#child上就又会触发一次
onmouseover事件（想想确实是这样哈），两次事件同时执行，顿时就亮瞎眼了。平时都用jquery，还真没发现这种问题，果然站在巨人的肩膀上就是好啊。
上面这个问题算了解决了，再问一个关于事件冒泡的新问题
这个例子中，我addEventListener()的第三个参数都设为true，也就是都在捕获阶段绑定事件处理函数，这应该不同于冒泡阶段绑定事件处理函数吧。所以按道理点击div#child的时候应该是先触发div#container的点击事件，再触发div#child的点击事件吧？然而现实却是相关的，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="container" style="width:200px;height:200px;background:blue;">
<div id="child" style="width:100px;height:100px;background:red;">
</div>
</div>
<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>
解决方案
这事还真和事件冒泡有关系，看看这个（记得按 F12 把开发者工具的控制台打开）
https://jsfiddle.net/f7920oqd/
mouseover 在鼠标移入 container 和 child 的时候都会触发
mouseenter 只有在刚进入 container 的时候触发，移入移出 child 都不会触发。
这篇关于javascript - onmouseover事件会执行多次（应该和事件冒泡没关系吧）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
