如何在 DaisyUI 折疊標題中獲取按鈕的單擊事件？

Question

我正在嘗試做這樣的事情： https://stackblitz.com/edit/daisyui-sveltekit-furm6v?file=src%2Froutes%2F%2Bpage.svelte

這是它的代碼：

<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>

我不確定是否/如何讓按鈕的點擊處理程序運行。 有什么建議嗎？

謝謝

我試過使用 z-index 但我想那只是為了display而不是事件處理。

我已經在按鈕上嘗試了stopPropagation ，但那也沒有用。

Answer 1

所以現在的問題是input元素覆蓋了標題 div，這就是為什么您的點擊沒有到達按鈕。 為了解決這個問題，我們可以稍微改變一下順序並弄亂指針事件。

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

這將確保標題覆蓋輸入，但點擊會落入輸入而不是落入按鈕。