首页-教程-Web前端

Javascript如何阻止事件冒泡和事件本身发生

 3742

Javascript如何阻止事件冒泡和事件本身发生


1、阻止事件冒泡发生

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .boxA {
  10.             overflow: hidden;
  11.             width: 300px;
  12.             height: 300px;
  13.             margin: 100px auto;
  14.             background-color: blue;
  15.             text-align: center;
  16.         }       
  17.         .boxB {
  18.             width: 200px;
  19.             height: 200px;
  20.             margin: 50px;
  21.             background-color: green;
  22.             line-height: 200px;
  23.             color: #fff;
  24.         }
  25.     </style>
  26. </head>
  27.  
  28. <body>
  29.     <div>
  30.         <div>boxB</div>
  31.     </div>
  32.     <script>
  33.         var boxA = document.querySelector('.boxA');
  34.         var boxB = document.querySelector('.boxB');
  35.         boxA.onclick = function (e) {
  36.         console.log('我被点击了boxA');
  37.     };
  38.     boxB.onclick = function (e) {
  39.         e.cancelBubble=true; //不冒泡
  40.         console.log('我被点击了boxB');
  41.     };
  42.     </script>
  43. </body>
  44. </html>


2、阻止事件本身发生

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <form action="http://www.php.cn" method="POST">
  10. <button type="submit">按钮1</button>
  11. </form>    
  12. <body>
  13.     <script>
  14.         const btn=document.querySelector("button");
  15.         console.log(btn);
  16.         btn.addEventListener("click",function(e){
  17.             e.preventDefault();
  18.         });
  19.     </script>
  20. </body>
  21. </html>


TAG标签：
本文网址：https://www.zztuku.com/detail-8779.html
站长图库 - Javascript如何阻止事件冒泡和事件本身发生
申明：如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐