Jquery 停止标签上的单击事件传播

我很难理解为什么我点击标签时无法停止传播

测验 $function{ $'box'。单击复选框； $“标签”。单击“标签”； }; 功能标签{ console.log'label'； e、 停止传播； } 函数复选框{ console.log'checkbox'； e、 停止传播； }

---

当我单击标签时，复选框函数被激发，尽管标签函数中有stopPropagation。这是一个看似简单的问题，但解决方案似乎不那么简单…

之所以会出现这种情况，是因为这是浏览器的默认行为。您可以通过两种方式将复选框与标签关联：

标签内的复选框，如：

<label><input type="checkbox" id="box"/>Test</label>

在这两种情况下，该复选框将在单击标签时自动选中/取消选中。这一点也在本文中提到

因此，为了防止此默认操作，您应该在标签内部使用click like：

$function{ $'box'。单击复选框； $“标签”。单击“标签”； } 功能标签{ e、 防止违约； console.log'label'； } 函数复选框{ e、 停止传播； console.logcheckbox； } 测验 这是我的工作

$('#box').on('change',function(e){
    console.log(e);
});

---

您需要停止用户在标签上单击的传播，然后触发浏览器对输入的单击。所以你只需要停止那个事件的传播。然后剩下的就是输入上的一个更改事件，从而产生所需的行为

还是有点烦人，我知道

在下面的代码段中，请注意单击标签与单击复选框之间的区别

让输入=document.getElementById'box'； 让label=document.getElementById'boxLabel'； //停止用户单击传播 label.addEventListener'click'，stopProp； //停止浏览器单击以防止传播 input.addEventListener'click'，stopProp； 功能止动索{ e、 停止传播； console.loge.target+“单击停止！”； } input.addEventListener'change'，函数E{ console.loge.target+“值已更改！”； }; 测验

---

很不错的。我正要发布一个类似这样的答案。我更喜欢你的，帕拉ѕѕѕѕѕ这里的问题是我需要默认行为。你的违约不允许。所以这个解决方案告诉我，没有什么真正干净的东西可以真正停止传播。@amo您需要停止用户在标签上单击的传播，然后触发浏览器对复选框的单击。所以你只需要停止那个事件的传播。然后剩下的就是输入上的一个更改事件，从而产生所需的行为。

$('#box').on('change',function(e){
    console.log(e);
});