解决label 和checkbox点击事件触发两次问题

Posted 2023-04-02

参考技术A 最近在做项目是遇到自定义checkbox多选需求，点击label时，触发了两次点击事件

看下图，神奇的事情发生了！！！竟然label没有选中的样式，还 把 “选中” 和 “删除” 都给我打印出来了，同时满足这两个矛盾的条件是不可能的，那到底是什么原因呢？

点击label的时候打印“选中”，label添加class selected，当事件冒泡到input时，已经满足条件$(this).hasClass("selected")，打印“删除”，删除class selected，由于这个时间很短，这就是为什么我点击label没有给它添加样式了

我们可以看到下图已经有选中的样式了

关于label标签点击事件触发两次问题

给confirmBillCard 绑定点击事件，当点击lable时候，事件会触发两次，解决办法：

1：

2：