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

Question

I have:

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

Is there any way I can combine on:click and on:auxclick into on:click|auxclick , or something similar to this effect? (Code below gives me a syntax error.)

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

Edit: for clearer description

Answer 1

You could use an action and manually set which events you want listened for:

// 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})
    } 
  }
}

and then use it in your component:

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

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

Answer 2

move your click handler in to a script tag.

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

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

Answer 3

Nope, this is not possible without creating named function.
And syntax you proposed: on:click|auxclick={func} is already reserved by event modifiers feature (you can learn about them from here )

---

In the future you maybe could listen for all events - proposal and syntax could be found in issue on github