javascript事件冒泡

最新推荐文章于 2024-08-27 15:59:21 发布

线程撕裂者+

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量80

点赞数

分类专栏： javascript 文章标签： javascript js event

本文链接：https://blog.csdn.net/weixin_46540009/article/details/115038201

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

javascript事件冒泡

鼠标离开事件（onmouseout）：

（1）鼠标通过粉色区域进入蓝色区域，会触发粉色区域的鼠标离开事件；

（2）鼠标通过蓝色区域进入粉色区域，会触发蓝色区域的鼠标离开事件，并触发粉色区域的鼠标离开事件；

（3）鼠标进入蓝色区域（不进入粉色区域）,会触发蓝色区域的鼠标离开事件，并触发粉色区域的鼠标离开事件；
在这里插入图片描述

出现以上这些问题的原因就是事件的冒泡

解决代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件冒泡 event</title>
	<style type="text/css">

	div{
		width:200px;
		height:200px;
		background-color: red;
	}
	p{
		width:100px;
		height:100px;
		background-color: blue;
		margin:20px;
	}


	</style>
     
	<script type="text/javascript">
	//event.srcElement
	//event.formElement
        window.onload = function(){
           
          var divNode = document.getElementById("one");
          var pNode = document.getElementById("two");

          divNode.onclick = function(){
          	 alert("div");
          }

          pNode.onclick = function(){
          	 alert("p");
          	 event.stopPropagation();
          }

        }


	</script>
</head>
<body>
<div id="one">
	<p id="two">123</p>
</div>
	
</body>
</html>

线程撕裂者+

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript事件冒泡

javascript事件冒泡鼠标离开事件（onmouseout）：（1）鼠标通过粉色区域进入蓝色区域，会触发粉色区域的鼠标离开事件；（2）鼠标通过蓝色区域进入粉色区域，会触发蓝色区域的鼠标离开事件，并触发粉色区域的鼠标离开事件；（3）鼠标进入蓝色区域（不进入粉色区域）,会触发蓝色区域的鼠标离开事件，并触发粉色区域的鼠标离开事件；出现以上这些问题的原因就是事件的冒泡解决代码实例：<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫

专栏目录