取消冒泡

最新推荐文章于 2021-08-12 19:59:35 发布

Vivian_shuang

最新推荐文章于 2021-08-12 19:59:35 发布

阅读量451

点赞数

分类专栏： JavaScript 文章标签：取消冒泡

本文链接：https://blog.csdn.net/Vivian_shuang/article/details/51900713

版权

171 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>

<head>

.wrap{

width: 200px;

height: 200px;

background-color: palegreen;

}

</style>

</head>

<body>

// 取消冒泡,由于事件冒泡会触发绑定在父级标签上的同类型事件，会给我们的开发带来很多麻烦，所以我们需要取消事件冒泡。取消事件冒泡的方法有两种，方法一：event.cancelBubble = true;方法二：event.stopPropagation();

var wrap = document.querySelector(".wrap");

wrap.onclick = function(){

alert("wrap is clicked");

// event.cancelBubble = true; // 取消冒泡事件

event.stopPropagation(); // 取消冒泡事件方法2

}

// 因为事件冒泡，作为父级的document.onclick事件也会被触发

document.onclick = function(){

alert("document is clicked");

}

</script>

</body>

</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

关注关注