如何在DaisyUI Collapse标题中捕获按钮的点击事件？

我明白你遇到的麻烦了：在DaisyUI的collapse组件里，点击"save changes"按钮时，alert('saved')完全没触发——哪怕加了stopPropagation()也没用，但原生<details>里的按钮却能正常工作。

问题根源 #

DaisyUI的collapse组件是靠隐藏的<input type="checkbox">来控制展开/折叠状态的，这个checkbox实际上覆盖在整个collapse-title区域的最上层（视觉上不可见）。当你点击按钮时，事件先被这个上层的checkbox捕获，直接触发了折叠状态切换，导致按钮的点击处理器根本没机会执行——哪怕你给按钮加了stopPropagation()，也拦不住这个提前发生的事件拦截。

两种可行的解决方案 #

方案1：提升按钮的层级优先级

给按钮添加更高的z-index，确保它在checkbox的上层，让点击事件能直接落到按钮上：

<button on:click|stopPropagation={() => alert('saved')} class='btn btn-error z-10'>save changes</button>

方案2：精准控制元素的点击响应

给collapse-title设置pointer-events: none，让它本身不响应点击，再给里面的可交互元素（标题文本和按钮）单独设置pointer-events: auto——这样只有指定元素能触发点击，checkbox不会再拦截按钮的事件：

<div class="collapse-title text-xl font-medium pointer-events-none">
  <span class="pr-4 pointer-events-auto">Click me to show/hide content</span>
  <button on:click|stopPropagation={() => alert('saved')} class='btn btn-error pointer-events-auto'>save changes</button>
</div>

修复后的完整代码示例 #

<h1 class='text-xl'>Daisy attempt (Fixed)</h1>

<div class="collapse collapse-arrow">
  <input type="checkbox" /> 
  <div class="collapse-title text-xl font-medium pointer-events-none">
    <span class="pr-4 pointer-events-auto">Click me to show/hide content</span>
    <button on:click|stopPropagation={() => alert('saved')} class='btn btn-error pointer-events-auto'>save changes</button>
  </div>
  <div class="collapse-content"> 
    <p>hello</p>
  </div>
</div>

<hr class=mt-4>

<h1 class='text-xl'>Native components solution</h1>

<details>
  <summary>
    <span class=pr-4>Click me to show/hide content</span>
    <button on:click|stopPropagation={() => alert('saved')} class='btn btn-error'>save changes</button>
  </summary>
  
  details
</details>

<style>
summary:hover {
  cursor: pointer;
}
</style>

这样调整后，按钮的点击事件就能正常触发，同时折叠面板的展开/折叠功能也不受影响。

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