我尝试在单击元素中的复选框时禁用该元素的折叠/展开。
对于我在codepen上的示例，我的代码使用Boostrap v4，但使用v5时，stopPropagation函数似乎被忽略了。
请参见此处-https://codepen.io/s89_/pen/oNyKbYE
我***可以***将单击功能 Package 到一个div中，该div不 Package 输入复选框，但我希望整个行宽都是可单击的，这样禁用事件传播似乎更容易。
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>

JS系统

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