Bootstrap 5中点击复选框时stopPropagation()无法禁用折叠问题

在Bootstrap v4里，给折叠元素内的复选框加个click事件并调用event.stopPropagation()，就能做到点复选框时不触发父元素的折叠/展开。但这套逻辑到了Bootstrap v5里就失效了，stopPropagation()根本没用。下面给出问题的原因和几种解决方法，既能保持整行可点击，又能实现需求。

原始代码 #

HTML #

<div id="collapse-example">
  <div class="card col-6" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    <div class="card-header d-flex justify-content-between" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link">
          Collapsible Group Item #1
        </button>
      </h5>
      <div class="checkboxes">
        <input type="checkbox" id="custom-input">
      </div>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Loreum ipsum
      </div>
    </div>
  </div>
</div>

JavaScript #

const input = document.getElementById('custom-input')
input.addEventListener('click', function(event) {
  event.stopPropagation();
});

问题根源 #

Bootstrap v5和v4的核心区别在于，v5的折叠组件用事件委托处理交互——把事件监听绑定在document层面，而不是直接绑定在触发元素上。这时候你在复选框的click事件里调用stopPropagation()，只能阻止事件冒泡到父元素，却拦不住事件传到document上的监听器，所以折叠逻辑还是会触发。

解决方法 #

方法1：在触发元素上直接拦截 #

给带data-bs-toggle="collapse"的父元素加点击事件，判断点击的是不是复选框（或它的容器），是的话就阻止默认折叠行为：

const collapseTrigger = document.querySelector('[data-bs-toggle="collapse"][data-bs-target="#collapseOne"]');

collapseTrigger.addEventListener('click', function(e) {
  // 检查点击目标是否是复选框或其所在容器
  if (e.target.closest('#custom-input, .checkboxes')) {
    e.preventDefault();
    e.stopPropagation();
  }
});

方法2：利用Bootstrap折叠事件拦截 #

监听折叠组件的show.bs.collapse和hide.bs.collapse事件，只要触发源是复选框，就阻止折叠：

const collapseElement = document.getElementById('collapseOne');

// 阻止点击复选框时展开折叠
collapseElement.addEventListener('show.bs.collapse', function(e) {
  const trigger = e.relatedTarget;
  if (trigger.contains(document.getElementById('custom-input'))) {
    e.preventDefault();
  }
});

// 阻止点击复选框时收起折叠
collapseElement.addEventListener('hide.bs.collapse', function(e) {
  const trigger = e.relatedTarget;
  if (trigger.contains(document.getElementById('custom-input'))) {
    e.preventDefault();
  }
});

方法3：监听mousedown事件截断冒泡 #

mousedown事件比click事件先触发，在这个阶段阻止冒泡，能提前把事件拦下来，不让Bootstrap的监听器捕获到：

const input = document.getElementById('custom-input');

const stopPropagation = (e) => e.stopPropagation();
// 同时监听mousedown和click，覆盖所有交互场景
input.addEventListener('mousedown', stopPropagation);
input.addEventListener('click', stopPropagation);

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