JS中的冒泡事件

　　用个简单的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

 

posted @ 2019-06-29 13:15  一颗糊涂淡  阅读(3096)  评论(0)  编辑  收藏  举报