当点击子盒子btn时,只输出了我是捕获阶段下的父盒子,,所以这种情况下的阻断事件传播,连冒泡阶段也会阻断是吗?

当点击子盒子btn时,只输出了我是捕获阶段下的父盒子,,所以这种情况下的阻断事件传播,连冒泡阶段也会阻断是吗?

<div id="box">

        <button id="btn">按钮</button>

    </div>

    <script>

        var box = document.getElementById('box');

        var btn = document.getElementById('btn');

        

box.onclick = function (e) {

            //在冒泡阶段下的父盒子阻断事件继续传播不会阻止子盒子传播

        //    e.stopPropagation();

            console.log('我是冒泡阶段下的父盒子');

        }

        btn.onclick = function (i) {

            //阻断事件传播,使父盒子事件不会响应

            i.stopPropagation();

            console.log('我是冒泡阶段下的子盒子');

        }

       box.addEventListener('click',function(e){

           e.stopPropagation();

           console.log('我是捕获阶段下的父盒子');

       },true)

       btn.addEventListener('click',function(e){

           //e.stopPrapagation();

           console.log('我是捕获阶段下的子盒子')

       },true)


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕然然 2021-04-27 14:27:39

同学你好,通过addEventListener方法给元素添加事件监听时,addEventListener方法的第三个参数设为true监听捕获阶段,设为false监听冒泡阶段

http://img1.sycdn.imooc.com//climg/6087ac4509e7fd1810690527.jpg


同学的代码中addEventListener方法的第三个参数为true,给元素添加的是捕获阶段的事件监听。

因此,stopPropagation()方法阻断的只是捕获阶段的事件传播,与冒泡阶段无关。

祝学习愉快!

  • 提问者 慕仙1405838 #1

    既然这样,那为什么最后只输出   我是捕获阶段下的父盒子?

    2021-04-27 19:28:31
  • 好帮手慕然然 回复 提问者 慕仙1405838 #2

    同学你好,从下图的代码中,能够看出DOM事件流先执行的是addEventListener绑定的捕获阶段的事件处理函数,然后执行的是onclick绑定的冒泡阶段的事件处理函数

    http://img1.sycdn.imooc.com//climg/6088e71e09d4b3af13020345.jpg

    在下列代码中,e.stopPropagation()阻断了事件捕获,也就不会再向上冒泡执行onclcik绑定的冒泡阶段的事件处理函数。

    http://img1.sycdn.imooc.com//climg/6088e7bd09ee77df05650146.jpg

    祝学习愉快!

    2021-04-28 12:46:25
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师