点击外层div切换Checkbox，如何排除内部元素的触发干扰？

我明白你遇到的困扰了——点击.noSelectorClick类的label和radio时，不希望触发外层.itemSelector的checkbox切换，但之前的方法没起作用。这是因为你搞错了事件冒泡的阻止时机，下面给你正确的解决方案：

问题根源 #

你之前在.itemSelector的点击事件里调用e.stopPropagation()，这只能阻止事件继续向更上层的父元素传播，但内部元素的点击事件已经冒泡到.itemSelector了，所以父级的处理函数还是会执行。而.children('.noSelectorClick').off()也没用，因为这些元素本身没绑定自定义点击事件，问题出在事件冒泡上，不是它们自己的事件触发了什么。

正确解决方案 #

我们需要在.noSelectorClick元素的点击事件里直接阻止冒泡，这样点击它们时，事件就不会传到外层的.itemSelector了。同时优化一下父级的checkbox选择逻辑，让代码更高效：

// 处理.itemSelector的点击，切换checkbox状态
$('.itemSelector').on('click', function() {
    // 直接从当前点击的元素内部找目标checkbox，不用全局查找
    const targetCheckbox = $(this).find('.header input[value=' + this.id + ']');
    // 简化切换逻辑
    targetCheckbox.prop('checked', !targetCheckbox.is(':checked'));
});

// 阻止.noSelectorClick元素的点击事件冒泡到父级
$('.noSelectorClick').on('click', function(e) {
    e.stopPropagation();
});

额外说明 #

• 你的radio是disabled状态，点击label本来就不会触发radio的状态变化，我们只需要阻止这个点击事件冒泡到父级的.itemSelector就好。
• 用$(this).find()替代全局的$('#wizard ...')，既能提高查找效率，也避免了页面中多个元素时的选择错误。

内容的提问来源于stack exchange，提问作者lennert_h