如何将可点击的复选框嵌套在容器中，该容器是svelte

问题描述

我有一个 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>

解决方法

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

我认为您做对了，也许您有错字或其他东西。您只需要在Card组件的onclick语句中添加“ | self”

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