如何在 DaisyUI 折叠标题中获取按钮的单击事件？

Question

I'm trying to do something like this: https://stackblitz.com/edit/daisyui-sveltekit-furm6v?file=src%2Froutes%2F%2Bpage.svelte

Here's the code from it:

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

<div class="collapse collapse-arrow">
  <input type="checkbox" /> 
  <div class="collapse-title text-xl font-medium">
    <span class=pr-4>Click me to show/hide content</span>
    <button on:click|stopPropagation={() => alert('saved')} class='btn btn-error'>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>

I'm not sure if/how to get the button's click handler to run. Any advice?

Thanks

I've tried using z-index but I suppose that's only for display not event handling.

I've tried stopPropagation on the button but that didn't work either.

Answer 1

So the issue right now is that the input element is covering the title div, which is why your clicks are not reaching the button. To fix this we can just change the order a bit and mess with the pointer events.

.collapse-title {
  z-index: 10;
  pointer-events: none;
}
.collapse-title button {
  pointer-events: all;
}

this will make sure that the title covers the input, but that clicks fall though to the input while not falling through the button.