[JavaScript]取消默认行为和事件冒泡

最新推荐文章于 2023-02-11 21:21:09 发布

DaftJayee

最新推荐文章于 2023-02-11 21:21:09 发布

阅读量136

点赞数

分类专栏： javascript 前端面试题

本文链接：https://blog.csdn.net/qq_43540219/article/details/108014621

版权

javascript 同时被 2 个专栏收录

112 篇文章 0 订阅

订阅专栏

前端面试题

67 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#dv1 {
			width: 300px;
			height: 300px;
			background: red;
		}

		#dv2 {
			width: 100px;
			height: 100px;
			background: blue;
		}
	</style>
</head>

<body>

	<div id='dv1'>
		<div id='dv2'></div>
	</div>


	<a href="http://www.baidu.com/" id='oA'>跳转</a>
	<!--取消了默认行为则a标记无法跳转-->

	<script>
		oA.onclick = function (e) {
			if (e.preventDefault) { //阻止默认行为
				e.preventDefault() //w3c
			} else {
				e.returnValue = false //ie
			}
		}

		dv1.onclick = function () {
			alert("div1")
		}
		dv2.onclick = function (e) {
			alert("div1")
			var e = window.event || e;

			if (e.stopPropagation) { //阻止事件冒泡
				e.stopPropagation(); //w3c
			} else {
				e.cancelBubble = true; //ie
			}
			//阻止事件冒泡后点击div2就不再会触发div2的事件了

		}
	</script>

</body>

</html>

更多阻止事件冒泡、事件捕获以及应用场景相关内容查看：
https://blog.csdn.net/qq_43540219/article/details/107826683?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159741341919195162513654%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=159741341919195162513654&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_blogfirst_rank_v2~rank_blog_v1-1-107826683.pc_v2_rank_blog_v1&utm_term=%E5%86%92%E6%B3%A1&spm=1018.2118.3001.4187