I have:

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

Is there any way I can bine 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

I have:

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

Is there any way I can bine 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

• javascript
• svelte

3 Answers 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

UPD: Also remend you to look at @kindoflew answer. You can implement this using custom action.

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 ponent:

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

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

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>