请问mouseenter方法的“不冒泡”，该如何理解？
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQ--mouseenter测试</title>
<style>
*{margin: 0; padding: 0; color: #fff;}
div{width: 100px; height: 100px; padding-top: 20px; background: green; margin: 100px auto;}
p{width: 150px; height: 50px; background: red;}
</style>
<script src="jquery.js"></script> <!-- 1.9.0版 -->
</head>
<body>
<div id="d">
<p>子元素</p>
父元素
</div>
<script>
var a=0;
$(function(){
$('#d').mouseenter(function(){ /*#d,父元素,当mouseenter时背景变为黑色*/
$(this).css('background','#000');
});
$('#d p').mouseenter(function(){ /*#d p,子元素,当mouseenter时背景变为黑色*/
$(this).css('background','#000');
});
});
</script>
</body>
</html>**当鼠标移入子元素时，我以为只有子元素的背景变成黑色，因为.mouseenter()不冒泡，但结果父、子两个元素都变成黑色了。
我不明白了，mouseenter不冒泡啊，那应该只有子元素背景变成黑色，怎么都变了？求讲解！**
展开
收起
1
条回答
写回答
写回答
-
1）mouseenter不冒泡是指，当以一个元素捕获到mouseenter事件后，不再通知其父元素，父元素也就不会处理mouseenter时间了
2）就问题中的2个mouseenter//只要元素进入div#d区域，mouseenter事件就会被触发 //一个mouse要进入一个子元素，必然经过其父元素，故鼠标达到子元素触发mouseenter后其父元素的mouseenter事件也会被触发 $('#d').mouseenter(function(){ /*#d,父元素,当mouseenter时背景变为黑色*/ $(this).css('background','#000'); }); //只要元素进入div#d p区域，也就是div#d的子元素p区域是，mouseenter事件就会被触发 //但是此时div#d上的mouseenter事件监听不会再被触发，因为没有冒泡上去 $('#d p').mouseenter(function(){ /*#d p,子元素,当mouseenter时背景变为黑色*/ $(this).css('background','#000'); });2019-07-17 19:17:17赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
