在Javascript
中事件冒泡是由节点产生,然后会影响到父节点,逐级上升,最后慢慢影响到整个页面,但是有时我们想要阻止事件冒泡的发生甚至事件本身的发生呢?本文就带大家一起来了解一下。
1.阻止事件冒泡发生
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .boxA { overflow: hidden; width: 300px; height: 300px; margin: 100px auto; background-color: blue; text-align: center; } .boxB { width: 200px; height: 200px; margin: 50px; background-color: green; line-height: 200px; color: #fff; } </style> </head> <body> <div class="boxA"> <div class="boxB">boxB</div> </div> <script> var boxA = document.querySelector('.boxA'); var boxB = document.querySelector('.boxB'); boxA.onclick = function (e) { console.log('我被点击了boxA'); }; boxB.onclick = function (e) { e.cancelBubble=true; //不冒泡 console.log('我被点击了boxB'); }; </script> </body> </html>
2.阻止事件本身发生
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <form action="http://www.php.cn" method="POST"> <button type="submit">按钮1</button> </form> <body> <script> const btn=document.querySelector("button"); console.log(btn); btn.addEventListener("click",function(e){ e.preventDefault(); }); </script> </body> </html>
推荐:《2021年js面试题及答案(大汇总)》
Atas ialah kandungan terperinci Javascript如何阻止事件冒泡和事件本身发生. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!