jQuery mouseenter方法的不冒泡如何理解？
程序员文章站
2022-04-20 15:25:41
...
代码：
<!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');
});
});
**当鼠标移入子元素时，我以为只有子元素的背景变成黑色，因为.mouseenter()不冒泡，但结果父、子两个元素都变成黑色了。我不明白了，mouseenter不冒泡啊，那应该只有子元素背景变成黑色，怎么都变了？求讲解！**
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');
});
似乎还是不好理解那么我们就看下冒泡的mouseover是个什么样的表现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../script/jquery-2.1.3.min.js"></script>
<script>
$(function(){
/*
$('#d'). mouseover(function(){
$(this).css('background','orange');
if(!$(this).data('data-count')){
$(this).data('data-count',1)
}else{
$(this).data('data-count',$(this).data('data-count')+1);
}
$(this).find('span').text($(this).data('data-count'));
});
$('#d p').mouseover(function(){
$(this).css('background','yellow');
if(!$(this).data('data-count')){
$(this).data('data-count',1)
}else{
$(this).data('data-count',$(this).data('data-count')+1);
}
$(this).text($(this).data('data-count'));
});
*/
$('#d'). mouseenter(function(){
$(this).css('background','orange');
if(!$(this).data('data-count')){
$(this).data('data-count',1)
}else{
$(this).data('data-count',$(this).data('data-count')+1);
}
$(this).find('span').text($(this).data('data-count'));
});
$('#d p').mouseenter(function(){
$(this).css('background','yellow');
if(!$(this).data('data-count')){
$(this).data('data-count',1)
}else{
$(this).data('data-count',$(this).data('data-count')+1);
}
$(this).text($(this).data('data-count'));
});
});
</script>
</head>
<body>
<div id="d" style="width:200px;height:200px;background-color: greenyellow">
<span>父元素</span>
<p style="padding:5px;width:100px;height:100px;background-color: red;display:block">子元素</p>
</div>
</body>
</html>
运行上面饿代码我们能看到，每次鼠标进入子元素触发mouseover事件，就会冒泡到其父元素，进入执行父元素的mouseover事件监听-显示的数字会增加
而换成mouseenter事件监听就不会发生这样的情况-显示的数字不增加
并且在子元素的mouseover的事件监听函数中阻止冒泡-stopPropagation，父元素的事件就不会被回调
以上就是jQuery mouseenter方法的不冒泡如何理解？的详细内容，更多请关注其它相关文章！
下一篇： JS 全屏和退出全屏详解（含有代码）