Svelte中如何按需移除和重新添加点击事件监听器？

你当前的元素代码：

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

需要实现点击状态的切换，现有临时解法是在事件处理函数中通过disabled变量判断是否执行逻辑：

let disabled = false;

function handleClick() {
  if (disabled) return;

  // 执行点击逻辑
}

下面是两种更符合Svelte风格的优雅实现方式：

方式一：条件绑定事件（推荐） #

利用Svelte的响应式特性，直接在事件绑定处通过条件判断决定是否绑定处理函数，Svelte会自动完成事件监听器的添加/移除：

<script>
  let isClickable = true;

  function handleClick() {
    // 执行点击逻辑
  }
</script>

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

当isClickable为true时，绑定点击事件；为false时，将事件绑定设为null，Svelte会自动移除对应的监听器，无需手动管理逻辑。

方式二：CSS样式阻止点击（适合需要视觉反馈的场景） #

通过添加CSS类来阻止点击行为，同时给用户视觉上的不可点击提示：

<script>
  let isClickable = true;

  function handleClick() {
    // 执行点击逻辑
  }
</script>

<div 
  on:click={handleClick}
  class:not-clickable={!isClickable}
>Click here</div>

<style>
  .not-clickable {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
  }
</style>

这种方式通过pointer-events: none阻止元素响应点击，同时修改透明度和光标样式提示用户状态，适合需要直观视觉反馈的场景，但事件监听器依然存在，只是用户无法触发。

内容的提问来源于stack exchange，提问作者Karim Shaloh