冒泡是一种很有意思的现象,在我们的 js 中也有冒泡现象,让我们一起去看看吧
先来看一段代码
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body onclick="bo()">
<div onclick="d()">
<button onclick="b()">
<p onclick="ph()">点我冒泡p>
button>
div>
<script type="text/javascript">
function bo() {
console.log("body标签被点击了");
};
function d() {
console.log("div标签被点击了");
};
function b() {
console.log("button标签被点击了");
};
function ph() {
console.log("p标签被点击了啦");
};
script>
body>
html>
我们可以看到,我只点击了 p 标签,可是在外层的标签已经全部被触发了,这就是 js 中的冒泡现象。
那我要是不想要他们外层的事件被触发呢,那这就到了我们这篇文章的重点了,我们一起来看一下解决方法
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="js/jquery.js">script>
head>
<body>
<div>
<button>
<p>点击捕获p>
button>
div>
<script type="text/javascript">
var bd=document.querySelector("body");
var di=document.querySelector("div");
var bu=document.querySelector("button");
var px=document.querySelector("p");
bd.addEventListener("click",function(){
console.log("body被点击了")
});
di.addEventListener("click",function(){
console.log("div被点击了")
});
bu.addEventListener("click",function(){
console.log("buttom被点击了")
});
// 第一种
// px.addEventListener("click",function(event){
// event 是事件源,表示当前点击的元素
// console.log("p被点击了");
// event.stopPropagation();
// });
// 第二种
px.addEventListener("click",function(event){
if(event.target==this){//判断是否是当前绑定事件的元素元素触发的该事件
console.log("p被点击了");
event.cancelBubble = true;
}
});
script>
body>
html>