如何在 Svelte 中删除并重新添加点击侦听器？

Question

<div on:click={handleClick}>Click here</div>

有时我希望 div 可点击，有时则不然。如何按需删除和添加点击侦听器？

这是我使用的解决方法，目前正在工作，但我觉得必须有一种更优雅或更巧妙的方法来做到这一点。

let disabled = false;

function handleClick() {
  if (disabled) return;

  // do stuff otherwise
}

Answer 1

还有其他一些方法，例如将条件放入模板中，但最终您将需要一个标志某处（除非您进行直接的 DOM 交互，这是不推荐的）。

<button on:click={clickEnabled ? onClick : undefined}>...

这也可以通过存储或反应变量中的高阶函数来完成，然后你会得到类似的东西：

<button on:click={clickEnabled(onClick)}>...

该函数要么返回处理程序，要么返回

undefined

。