组件根上的单击事件不起作用

【问题标题】：Click event on component root not working组件根上的单击事件不起作用
【发布时间】：2020-02-22 06:49:54
【问题描述】：

我是 Svelte 的新手，我正在尝试在自定义组件根目录上放置一个 on:click 事件（在 Vue 中，我通过编写 v-on:click.native=... 来解决这个问题），但是似乎我做错了什么，因为事件没有触发。我在 Svelte repl here 上写了一个简单的例子。 click 事件在 'div' 元素上触发，但不在组件上。

【问题讨论】：

标签： event-handling svelte

【解决方案1】：

Svelte 不会自动代理来自组件根元素的原生事件，因为 Svelte 组件不需要具有单个根元素（或任何元素）。

所以你必须自己在组件中连接事件。

您可以一直使用createEventDispatcher，但也有一种快捷语法可以精确地执行您想要做的事情，代理原生 DOM 事件。

如果 on: 指令不带值使用，组件将转发事件，这意味着组件的消费者可以监听它。

docs

所以，用你的例子，是这样的：

<div on:click>
    <h2>
        {book.title}
    </h2>
    <h5>
        {book.author}
    </h5>
</div>

【讨论】：