如何阻止Bootstrap卡片内复选框与jQuery的事件冒泡？

1. 修正拼写错误（核心问题之一） #

你代码里的stopPropogation是拼写错误，正确的方法名是stopPropagation（字母a和o顺序搞反了），这直接导致你调用的方法不存在，自然无法阻止事件冒泡。

2. 优化事件处理逻辑 #

即使修正了拼写，建议调整事件处理的逻辑，避免不必要的事件冲突：

方案一：在卡片的点击事件中排除复选框的触发 #

不需要给复选框绑定额外的阻止冒泡事件，而是在卡片的click事件里判断点击目标是否为复选框或其关联元素，如果是则跳过状态切换：

card.on('click', (event) => {
  // 检查点击的目标是否是复选框本身，或者是否包含在复选框元素内
  if (!$(event.target).is('.account-select') && !$(event.target).closest('.account-select').length) {
    selectAccount.prop("checked", !selectAccount.prop("checked"))
  }
})

这样点击复选框时，卡片的点击事件不会执行切换逻辑，而复选框会正常响应自身的点击状态变化。

方案二：修正拼写后保留复选框的阻止冒泡 #

如果坚持要通过阻止冒泡解决，先修正拼写错误，同时只需要在复选框的click事件中处理即可，不需要绑定change事件：

selectAccount.on("click", (e) => {
   e.stopPropagation(); // 修正拼写
   // return false 在这里可以省略，因为stopPropagation已经阻止冒泡，而复选框的默认行为不需要阻止
})

此时点击复选框时，事件不会冒泡到卡片，卡片的click事件不会触发，复选框可以正常切换状态。

3. 额外说明 #

当点击复选框时，浏览器会先触发复选框的状态变更，再触发事件冒泡。如果卡片的click事件又反转一次状态，就会出现“看起来无效”的情况——相当于两次切换抵消了。修正拼写或排除复选框的触发后，就能避免这种冲突。

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