原生js父元素的鼠标事件：onmouseover会触发子元素的该事件冒泡，onmouseenter不会触发子元素的该事件冒泡

最新推荐文章于 2022-07-09 15:50:34 发布

每一天，每一步

最新推荐文章于 2022-07-09 15:50:34 发布

阅读量1.3k

点赞数 1

分类专栏： javaScript 文章标签： html5 javascript html

本文链接：https://blog.csdn.net/u010234868/article/details/120379700

版权

javaScript 专栏收录该内容

135 篇文章 12 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#father1 {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		#son1 {
			width: 100px;
			height: 100px;
			background-color: blue;
		}
		#father2 {
			width: 200px;
			height: 200px;
			background-color: green;
			margin: 20px 0 0 0;
		}
		#son2 {
			width: 100px;
			height: 100px;
			background-color: orange;
		}
	</style>
</head>
<body>
	<div id="father1">
		<div id="son1"></div>
	</div>
	<div id="father2">
		<div id="son2"></div>
	</div>

	<script>
		var father1 = document.getElementById('father1');
		var father2 = document.getElementById('father2');
		var i = 0, j = 0;
		father1.onmouseover = function () {  // 鼠标从父元素移动到子元素，会触发子元素的onmouseover，冒泡到父元素上
			i++;
			console.log('i: ' + i);
		};
		father2.onmouseenter = function () { // 此事件不会触发冒泡
			j++;
			console.log('j: ' + j);
		}
	</script>
</body>
</html>

每一天，每一步

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js父元素的鼠标事件：onmouseover会触发子元素的该事件冒泡，onmouseenter不会触发子元素的该事件冒泡

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #father1 { width: 200px; height: 200px; background-color: pink; } #son1 { width: 100px; height.
复制链接

扫一扫

专栏目录