事件捕获和时间冒泡，event.stopPropagation()；event.preventDefault()；和js jquery取消事件

林强181

于 2022-09-29 15:03:40 发布

阅读量463

点赞数

文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/qlin_11/article/details/127106900

版权

事件的取消有多种，大多是绑定和取消对应，其中需要使用绑定时的函数对象。比如原生的removelistener()，这些。而且存在着绑定和解绑的方式是对应的。
对于子代来说，可以使用阻止冒泡的方法来实现父级的不触发，有时会与;event.preventDefault();结合使用。
工作中遇到子级操作出发了父级
下文是一些参考：

1.某天，你坐在办公室里，手指纷飞。产品刚提了个小需求，你需要在下班前搞定上线。 “简单”，你轻蔑的一笑。“一个点击事件搞定。” 你熟练关掉了知乎，写了个事件监听，然后面向console.log编程，去看是否输出了东西。
你打开浏览器控制台，开始点击。“奇怪，没有生效”，你有些疑惑，但这打击不到你。你仔细看了下自己的逻辑，没有问题，又重启了服务，点击，依然没有生效。
你有些烦躁了，决定寄出杀招，event.stopPropagation()。重启，点击，依然无效。
你感到燥热，脱下格子衫，祭出第二个杀招，event.preventDefault()。重启，点击，依然无效。你有点想骂人，但还不是时候，你还能坚持一下。
你祭出了绝招，event.stopPropagation();event.preventDefault(); 重启，点击，生效了！ “不愧是爷”，你微微一笑，“任何难题在我丰富的经验面前都将不攻自破”。你打包，测试，上线，一气呵成。夜深了，天有些凉，你准备回家了。 “可是为什么呢？”，刚刚一直坐你旁边的实习生小王开口了，“这两个表达式究竟是什么意思呢？” “为什么？”，你突然发觉你也不知道为什么，你甚至从来没考虑过为什么。你感觉脸上有些挂不住，找了个借口，“我家里有点急事，先回家了，明天告诉你”。你急充充走了。回到家，你没有像往常一样打开游戏，而是打开电脑，在搜索框中输入了“event.stopPropagation 是什么”。
2.

<body>
    <div id="id1">
        点击我
    </div>

    <div id="id2" style="margin-top: 50px;">
        点击我2
    </div>

    <script>
        let div1 = document.querySelector('#id1');
        let div2 = document.querySelector('#id2');
        // 传统方式
        div1.onclick = function () {
            alert('我只能出现一次');
            div1.onclick = null;    // 删除事件
        }

        // 新方式
        div2.addEventListener('click', fn);
        function fn () {
            alert('我也只能出现一次');
            div2.removeEventListener('click', fn);      //去除事件
        }
    </script>
</body>