如何在 Svelte 中的不同事件上触发相同的功能

Question

我有：

<a href={link} on:click={() => func(param)} on:auxclick={() => func(param)}>
   click
</a>

有什么方法可以将 on:click 和 on:auxclick 组合成 on:click|auxclick 或类似的效果吗？（下面的代码给我一个语法错误。）

<a href={link} on:click|auxclick={() => func(param)}>
   click
</a>

编辑：为了更清楚的描述

Answer 1

将您的点击处理程序移动到脚本标记中。

<script>
function handleClick(event) {
  // do something here
}
</script>

<a href={link} on:click={handleClick} on:auxclick={handleClick}>
   click
</a>

Answer 2

不，如果不创建命名函数，这是不可能的。
您提出的语法：on:click|auxclick={func} 已被事件修饰符功能保留（您可以从 here 中了解它们）

将来您可能会监听所有事件 - 建议和语法可以在 issue on github

中找到

Answer 3

您可以使用 action 并手动设置您想要监听的事件：

// multiClicks.js

export const multiClicks = (node, callback) => {
  node.addEventListener('click', callback)
  node.addEventListener('auxclick', callback})

  return {
    destroy() {
      node.removeEventListener('click', callback)
      node.removeEventListener('auxclick', callback})
    } 
  }
}

然后在您的组件中使用它：

<script>
  import { multiClicks } from './multiClicks.js'
</script>

<a use:multiClicks={() => func(param)}>...</a>

如何在 Svelte 中的不同事件上触发相同的功能

How to trigger same function on different events in Svelte

javascript

svelte