Javascript 冒泡和捕捉，取消冒泡，阻止預設事件；
阿新 • • 發佈：2019-01-23
冒泡：從下到上
捕獲：從上到下
我們之前介紹到，addEventListener函式的第三個引數false為冒泡，true為捕獲，
1.先看一下冒泡的情況，如下程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 100px; height: 100px; background-color: #000; } </style> </head> <body> <div class="wrapper"> <div class="content"> <div class="box"></div> </div> </div> <script type="text/javascript"> var wrapper=document.getElementsByClassName('wrapper')[0]; var content=document.getElementsByClassName('content')[0]; var box=document.getElementsByClassName('box')[0]; wrapper.addEventListener('click', f1, false); content.addEventListener('click', f2, false); box.addEventListener('click', f3, false); function f1(){ alert('wrapper'); } function f2(){ alert('content'); } function f3(){ alert('box'); } </script> </body> </html>
三個元素父子關係為wrapper>content>box
點選wrapper時，彈出wrapper
點選content時，彈出content,wrapper
點選box時，彈出box,content,wrapper
2.再看一下捕獲的情況，如下程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 100px; height: 100px; background-color: #000; } </style> </head> <body> <div class="wrapper"> <div class="content"> <div class="box"></div> </div> </div> <script type="text/javascript"> var wrapper=document.getElementsByClassName('wrapper')[0]; var content=document.getElementsByClassName('content')[0]; var box=document.getElementsByClassName('box')[0]; wrapper.addEventListener('click', f1, true); content.addEventListener('click', f2, true); box.addEventListener('click', f3, true); function f1(){ alert('wrapper'); } function f2(){ alert('content'); } function f3(){ alert('box'); } </script> </body> </html>
三個元素父子關係為wrapper>content>box
點選wrapper時，彈出wrapper
點選content時，彈出wrapper,content
點選box時，彈出wrapper,content,box
3.看一下捕獲和冒泡同時存在的情況
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 100px; height: 100px; background-color: #000; } </style> </head> <body> <div class="wrapper"> <div class="content"> <div class="box"></div> </div> </div> <script type="text/javascript"> var wrapper=document.getElementsByClassName('wrapper')[0]; var content=document.getElementsByClassName('content')[0]; var box=document.getElementsByClassName('box')[0]; wrapper.addEventListener('click', f1, false); content.addEventListener('click', f2, false); box.addEventListener('click', f3, false); wrapper.addEventListener('click', f1, true); content.addEventListener('click', f2, true); box.addEventListener('click', f3, true); function f1(){ alert('wrapper'); } function f2(){ alert('content'); } function f3(){ alert('box'); } </script> </body> </html>
點選box，依次彈出 wrapper,content,box， box,content,wrapper，這證明，事件觸發時捕獲先於冒泡
4.取消冒泡
在這裡我封裝了一個函式stopBubble（）
box.addEventListener('click', stopBubble, false);//阻止冒泡
function stopBubble(e){
if(e.stopPropagation()){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
}點選box,彈出box
5.阻止預設事件
在這裡，我封裝了一個stopDefault（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="https://www.baidu.com" id="a">連結</a>
<script type="text/javascript">
var a=document.getElementById('a');
a.onclick=function stopDefault(e){
if(e.preventDefault()){
e.preventDefault();
}else{
e.returnValue=false;
}
alert(1);
}
</script>
</body>
</html>點選a連結，不跳轉到百度一下頁面