如何在 svelte 中的 link 容器中嵌套可点击的复选框

Question

我有一个 card 组件，当用户点击它时，它应该将用户转到另一个页面。它包含一个 复选框 ，它会触发一些操作。我想在用户点击卡片时转发他，但在他点击 复选框 时不转发。

我已经尝试在 card 元素上使用 self 和 stopPropagation，但没有成功。有没有办法将其添加到输入元素？以下是一些参考代码：

// Card Component
<div class="card" {style} on:click={() => goto(`${$page.path}/${app.name}`)}>
//...some code

  <Checkbox label="Compare Services" bind:checked={compare} />
</div>

// Checkbox Component
<label on:keypress={handleEnter} tabindex="1" class="checkbox-holder" {style}>
  <input type="checkbox" bind:checked />
  <div class="cool-checkbox">
    <div class="checkbox-square" class:checkbox-square-active={checked}>
      <i class={`fal fa-${checked ? 'check' : 'minus'}`} />
    </div>
    <span>{label}</span>
  </div>
</label>

Answer 1

这是一个工作示例：
https://svelte.dev/repl/627262b5eadf4774845ec6f3818cd4b1?version=3.24.1

我认为你是对的，也许你有一些错别字之类的。您只需要在 Card-component

中的 onclick-statement 添加“|self”

on:click|self={()=>console.log("div clicked")}

如何在 svelte 中的 link 容器中嵌套可点击的复选框

How to nest a clickable checkbox in a container that is a link in svelte

javascript

svelte

sapper