解决监听label时，点击label内input执行两次的bug

最新推荐文章于 2024-01-25 09:47:55 发布

秒你当切菜

最新推荐文章于 2024-01-25 09:47:55 发布

阅读量1.9k

点赞数

分类专栏： web 文章标签： label点击执行两次 input点击执行两次解决方案 bug 标签

本文链接：https://blog.csdn.net/u013705673/article/details/72236359

版权

在监听label和input点击事件时，发现点击input会导致事件执行两次。原因在于label元素的特性，当点击label内的文本时，会触发关联的控件。解决方法是对点击事件进行拦截，判断点击的目标元素是否为不期望触发事件的元素（如'SMALL'或'B'），从而避免事件重复执行。修复后，点击label下的input能正常执行预期操作。

摘要由CSDN通过智能技术生成

有的时候，我们需要监听label点击事件和input点击事件，如下所示：

</label>

我们希望点击label，checkbox能够被监听

$(this).find("label").on("click", function(d) {
var g = $(this);
var f = g.data("role");
if (f === "checkbox") {
if (g.hasClass("active")) {
g.removeClass("active").find("input[type=checkbox]").prop("checked", false);