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

事件的取消有多种,大多是绑定和取消对应,其中需要使用绑定时的函数对象。比如原生的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>


在jquery中,可以使用unbind()方法来解除元素的所有事件。

unbind() 方法移除被选元素的事件处理程序。

该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。

off() 方法通常用于移除通过on()方法添加的事件处理程序。
还有其他解绑方法
4.行内的click事件,通过删除click属性 removeattr的形式删除。
5.还可以通过click事件覆盖的形式进行。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值