取消冒泡

来源：互联网发布：啥软件下种子编辑：程序博客网时间：2024/04/19 18:33

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<styletype="text/css">

.wrap{

width:200px;

height:200px;

background-color: palegreen;

}

</style>

</head>

<body>

<scripttype="text/javascript">

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

varwrap = 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>

0 0