网站首页编程语言正文

stopPropagation是什么意思以及什么是事件的原理

作者：zhen12321 更新时间： 2022-01-01 编程语言

 <style>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: bisque;
        }

        .div2 {
            width: 100px;
            height: 100px;
            background-color: coral;

        }

        .div3 {
            width: 50px;
            height: 50px;
            background-color: crimson;
        }

        .div4 {
            width: 20px;
            height: 20px;
            background-color: purple;
        }

        div {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="div1">1
        <div class="div2">2
            <div class="div3">3
                <div class="div4">4</div>
            </div>
        </div>
    </div>

    <script>
        // 获取三个div,用于后续对div进行dom操作，主要针对事件。注意这三个div是有层级关系的。
        var div1 = document.querySelector(".div1");
        var div2 = document.querySelector(".div2");
        var div3 = document.querySelector(".div3");
        var div4 = document.querySelector(".div4");

        // 给每个div都添加监听事件。尝试着捕获阶段
        // 事件监听第三个参数默认不写为冒泡阶段拦截，
        // 如果为true,则为捕获截断拦截。
        // 如果为false，则为冒泡截断拦截。false是默认值。
        div1.addEventListener("click", clickhandler1);
        div2.addEventListener("click", clickhandler2, true);
        div3.addEventListener("click", clickhandler3, true);
        div4.addEventListener("click", clickhandler4, true);


        //当调用这个函数时，打印对应的字符串
        function clickhandler1(e) {
            console.log('1');
        }

        function clickhandler2(e) {
            console.log('2');

        }

        function clickhandler3(e) {
            console.log('3');
            e.stopPropagation();
        }

        function clickhandler4(e) {
            console.log('4');
        }
</script>

在这里插入图片描述
1.如果stopPropagation方法给的元素是捕获，那么阻止的就是捕获。
否则，阻止的就是冒泡。
2.点击谁，谁就是目标。每一次都是先从捕获阶段->目标->冒泡阶段考虑。如果中间达不到目标，那么后面就失败，不去执行。

例子1

1是冒泡，2，3，4是捕获。
在3截断,点击4：
分析：
1).4是目标，所以1->2->3->4。
2).3是阻断，3是捕获阶段阻断，所以阻断的是3的捕获截断。
3).所以点击4，只能从1->2->3，进入不了4，然后后面的失败。捕获2和3.

例子2

2和4是捕获，1和3是冒泡。阻断3，点击4:
1).4是目标，所以从1，2，3，4进入。
2).在3处截断，3是冒泡，所以阻止3冒泡。所以
1->2->3->4->3.
3).先输出捕获的，再输出冒泡的。
输出2,4,3.

如果想访问更多，请访问这篇大佬的博客

原文链接：https://blog.csdn.net/u010563350/article/details/122093814

上一篇：使用el-date-picker根据开始月份，动态禁用结束月
下一篇：element对穿梭框对接口返回的数据其他字段进行校验多个校

网站首页 编程语言 正文

stopPropagation是什么意思以及什么是事件的原理

例子1

例子2

相关推荐

网站首页编程语言正文