关于js中的事件问题?
橱窗的光
橱窗的光 2017-02-27 09:48:16
[JavaScript讨论组]

    
    Document
    
        #out{           
          width: 500px;           
          height: 500px;            
          background: red;            
          position: relative;        
        }
        #in{            
            width: 200px;            
            height: 200px;            
            background: green;            
            position: absolute;        
       }
    
    
    
    
        
    
             var out = document.getElementById("out");                 var i = document.getElementById("in");         out.addEventListener('click',a,true);         i.addEventListener('click',b,false);                 function a(){             out.style.backgroundColor = 'black';          }        function b(){             i.style.backgroundColor = 'blue';          }                   

在这段代码中为何点击子元素后父元素也会变色呢?在子元素上已经设置了阻止事件捕获啊?

2
0
0
橱窗的光
橱窗的光

全部回复(2)
数据分析师

关于js中的事件问题?-PHP中文网问答-关于js中的事件问题?-PHP中文网问答

围观一下哦,学习一下。

迷茫

addEventListener的第三个参数不是用来阻止事件捕获的
第三个参数是来控制事件是在捕获阶段或冒泡阶段执行
在你这个demo里面,当点击子元素时,会产生一个点击事件
事件会按照
捕获:window→document→html→body→#out→#in
执行:#in
冒泡:#in→#out→#body→#html→#document→#window
这样的顺序完成生命周期
你给#out的事件第三个参数设置的ture,那么当点击事件捕获到#out时,就会触发#out的点击事件

想要实现你的要求

 out.addEventListener('click',a);//让事件在冒泡阶段捕获
        i.addEventListener('click',b,false);        function a(){
            out.style.backgroundColor = 'black'; 
        }        function b(e){
            i.style.backgroundColor = 'blue'; 
            e.stopPropagation();//阻止子元素的事件冒泡
        }
专题推荐
更多>
热门话题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号