了解我的自定义 Svelte 组件中是否有点击事件处理程序

Question

有没有办法知道我的自定义组件上是否设置了点击处理程序？我想向其中添加 CSS class 以添加 cursor: pointer; 样式，但前提是单击时会发生某些事情。

为了说明，这里可能是自定义组件：

<script>
  $: magic = ? // this is what I'm after
</script>

<div on:click
     class:pointer={magic}
>
  I might be clickable!
</div>

<style>
  .pointer {
    cursor: pointer;
  }
</style>

Answer 1

据我所知，由于在 svelte 中实现事件的方式，这是不可能的，但是如果您需要更精细的控制，只使用道具不一定是错误的。即

<script>
export let onClick = () => {}
</script>

<button on:click={onClick}>Hello</button>

这里来自 svelte 团队 https://github.com/sveltejs/svelte/issues/4249#issuecomment-573312191

Answer 2

我认为您应该处理父元素中的点击事件，然后通过 prop

将 magic 变量从父元素传递到您的自定义元素

或者您可以在自定义组件中处理点击事件，然后使用 event forwarding

将事件分派给它的父级

了解我的自定义 Svelte 组件中是否有点击事件处理程序

Know if there's a click event handler in my custom Svelte component

svelte