Javascript高级——4.事件冒泡的用法以及阻止事件冒泡的四种方法

最新推荐文章于 2023-05-01 10:52:28 发布

Superstatus

最新推荐文章于 2023-05-01 10:52:28 发布

阅读量414

点赞数

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

本文链接：https://blog.csdn.net/Superstatus/article/details/80588510

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冒泡和阻止冒泡</title>
<script src="jquery.js"></script>
</head>

<body>
    <div id="out">
        <div id="middle">
        	<a href="#">测试</a>
        </div>
    </div>
<script>
$("#out").on("click",function(){console.log("out");});
$("#middle").on("click",function(){console.log("middle");});
$("a").on("click",function(event){
	console.log("a");
	//event.stopPropagation();		//阻止冒泡,但不阻止a标签的默认行为
	//return false;					//阻止a标签跳转的默认行为
	//event.preventDefault();			//只阻止默认行为，不阻止冒泡
	//event.stopImmediatePropagation();	//阻止所有事件，包括平级的
	});
$("a").on("click",function(event){
	console.log("b");
	});
</script>
</body>
</html>

结果： a b middle out

为了阻止事件冒泡，提供了四种方法：

          event.stopPropagation();		//阻止冒泡,但不阻止a标签的默认行为
	  return false;					//阻止a标签跳转的默认行为
	  event.preventDefault();			//只阻止默认行为，不阻止冒泡
	  event.stopImmediatePropagation();	//阻止所有事件，包括平级的

默认行为：当点击链接的时候，网址后面不会自动添加以#开头的字符