onmouseout事件的问题
为什么给外层的嵌套绑定一个事件，内层的嵌套也能够执行啊？
下面这段代码，不仅在鼠标划出外层嵌套的时候执行，在内层的每个嵌套划过时，它都会执行。可我明明是绑定了最外层嵌套的事件啊，请问这是为什么呢？不希望内层嵌套也执行这个事件，我该怎么改啊？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
div#out{
width: 200px;
height: 200px;
background: green;
}
div#inner1{
width: 50px;
height: 50px;
background: red;
}
div#inner1-1{
width: 30px;
height: 30px;
background: yellow;
}
div#inner2{
width: 50px;
height: 50px;
background: blue;
}
</style>
</head>
<body>
<div id="out">
<div id="inner1">
<div id="inner1-1"></div>
</div>
<div id="inner2"></div>
</div>
</body>
<script>
var out = document.getElementById("out");
out.onmouseover = function(){
console.log("mouseout");
}
</script>
</body>
</html>21
收起
正在回答
1回答
<script>
var out = document.getElementById("out");
out.onmouseover = function(){
if(event.target==this){
console.log("mouseout");
}
}
</script>
这是JS的高级事件知识，在JS的高级路径中会有讲解，当前了解即可！
祝学习愉快！
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星