JS中的冒泡事件

本文轉載自查看原文 2019-06-29 13:15 674 冒泡事件

　　用個簡單的demo來做示例
　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1 id='header'>2333</h1>
    <ul class="listbox">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

首先給li添加一個點擊事件

 <script>
       window.onload=function(){
           var li=document.getElementsByTagName('li');
           for(i=0;i<li.length;i++){
               li[i].onclick=function(){
                   alert('我是 li')
               }
           }
       } 
 </script>

點擊li會彈出提示框

　　但是這種點擊事件會繼承到li元素的祖先級

<script>
       window.onload=function(){
           var li=document.getElementsByTagName('li');
           var ul=document.getElementsByTagName('ul')[0];
           ul.onclick=function(){
               alert('ul繼承到了')
           }
           document.body.onclick=function(){
               alert('這是body')
           }
           for(i=0;i<li.length;i++){
               li[i].onclick=function(){
                   alert('我是 li')
               }
           }
       } 
    </script>

當我們給ul和body添加點擊事件，在點擊li區域，彈出提示框之后，點擊提示框上的確定，會繼續執行ul的點擊事件，再執行body的點擊事件

關閉這種冒泡事件，在li的點擊事件里加上關閉冒泡的命令

for(i=0;i<li.length;i++){
               li[i].onclick=function(){
                   alert('我是 li');
                   event.cancelBubble=true;
               }
           }

或者

for(i=0;i<li.length;i++){
               li[i].onclick=function(){
                   alert('我是 li');
                //    event.cancelBubble=true;
                   event.stopPropagation();
               }
           }

這樣，再次點擊li，彈出‘我是 li’之后，點擊彈窗的確定，就不會再彈出其他的提示框了

注意：event.cancelBubble的值是默認等於false

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js中什么是事件冒泡？ JS中的事件冒泡和事件捕獲 JS中的事件、事件冒泡和事件捕獲、事件委托 JS中的事件、事件冒泡和事件捕獲、事件委托 js中的事件監聽（冒泡和捕獲） JS中事件綁定函數，事件捕獲，事件冒泡 JS中綁定事件順序（事件冒泡與事件捕獲區別） JS中的事件冒泡（Bubble）和事件捕獲（capture）以及如何阻止事件的冒泡 js 事件冒泡 JS冒泡事件與處理