Question

有没有办法知道我的自定义组件上是否设置了点击处理程序？我想向其中添加一个 CSS 类，该类将添加 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 中的实现方式，这是不可能的，但是如果您需要更多微调控制，只使用 prop 不一定是错误的。即

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

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

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

Answer 2

我认为您应该处理父元素中的点击事件，然后通过 prop 将 magic 变量从父元素传递给您的自定义元素

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

将事件分派给它的父组件

知道我的自定义 Svelte 组件中是否有单击事件处理程序

2 个答案: