欧美成人免费观看_免费成人深夜天涯网站_日韩中文在线视频_天堂av一区二区_欧美xxxx性xxxxx高清_亚洲欧美一二三

事件冒泡和冒泡的阻止

2020-2-22 seo達(dá)人

事件冒泡概念：當(dāng)元素觸發(fā)了事件的時(shí)候，會(huì)依次向上觸發(fā)所有元素的相同事件。

事件冒泡的行為演示

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

#a{

background: pink;

width: 400px;

height: 400px;

}

#b{

background: green;

width: 300px;

height: 300px;

}

#c{

background: red;

width: 200px;

height: 200px;

}

</style>

</head>

<body>

<div id="a">

我是a

<div id="b">

我是b

<div id="c">我是c</div>

</div>

</div>

<script>

var a = document.querySelector('#a')

var b = document.querySelector('#b')

var c = document.querySelector('#c')

a.onclick = fn1;

b.onclick = fn2;

c.onclick = fn3;

function fn1(){

alert('a來了')

}

function fn2(){

alert('b來了')

}

function fn3(){

alert('c來了')

}

</script>

</body>

</html>

上面這段代碼一共有三個(gè)事件,三個(gè)div都分別綁定了單擊事件。在頁面中當(dāng)單擊c會(huì)連續(xù)彈出3個(gè)提示框。這就是事件冒泡引起的現(xiàn)象。事件冒泡的過程是：c --> b --> a 。c冒泡到b冒泡到a。

冒泡的阻止

方法：

1.event.stopPropagation(); 是事件對(duì)象Event的一個(gè)方法，作用是阻止目標(biāo)元素事件冒泡到父級(jí)元素 2.event.cancelBubble = true; IE瀏覽器的方法

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

#a{

background: pink;

width: 400px;

height: 400px;

}

#b{

background: green;

width: 300px;

height: 300px;

}

#c{

background: red;

width: 200px;

height: 200px;

}

</style>

</head>

<body>

<div id="a">

我是a

<div id="b">

我是b

<div id="c">我是c</div>

</div>

</div>

<script>

var a = document.querySelector('#a')

var b = document.querySelector('#b')

var c = document.querySelector('#c')

a.onclick = fn;

b.onclick = fn;

c.onclick = fn;

function fn(event){

var e = window.event || event;

// 事件冒泡的阻止

if(e.stopPropagation){

e.stopPropagation(); // 通用寫法

}else{

e.cancelBubble = true; // 阻止IE

}

var str = this.innerHTML;

alert(str)

}

</script>

</body>

</html>