Svelte自定义Button组件如何支持事件修饰符？

Hey there, I get what you're trying to do—Svelte's restriction on event modifiers for custom components can be frustrating, but there are a couple of solid workarounds to achieve the flexible behavior you want. Let's break them down:

Option 1: Explicit Props for Common Modifiers #

This approach uses individual props to toggle each event modifier, making it straightforward for common use cases like preventDefault or stopPropagation.

Here's how you'd implement your MyButton.svelte component:

<script>
  import { createEventDispatcher } from 'svelte';
  const emit = createEventDispatcher();

  // Define props for modifiers you want to support
  export let preventDefault = false;
  export let stopPropagation = false;

  function handleClick(event) {
    // Apply modifiers if enabled
    if (preventDefault) event.preventDefault();
    if (stopPropagation) event.stopPropagation();

    // Forward the event to the parent component's handler
    emit('click', event);
  }
</script>

<button on:click={handleClick}>
  <slot />
</button>

Then use it in a parent component like this:

<!-- Enable preventDefault -->
<MyButton preventDefault on:click={handleClick}>Click me</MyButton>

<!-- No modifiers enabled -->
<MyButton on:click={handleClick}>Click me without prevention</MyButton>

Option 2: Flexible Modifiers Object #

If you want to support a wider range of modifiers (like stopImmediatePropagation, self, etc.), using a single modifiers prop gives you more flexibility for combinations:

Update MyButton.svelte:

<script>
  import { createEventDispatcher } from 'svelte';
  const emit = createEventDispatcher();

  export let modifiers = {};

  function handleClick(event) {
    // Handle each modifier conditionally
    if (modifiers.preventDefault) event.preventDefault();
    if (modifiers.stopPropagation) event.stopPropagation();
    if (modifiers.stopImmediatePropagation) event.stopImmediatePropagation();
    // Handle the "self" modifier: only trigger if event originated from the button itself
    if (modifiers.self && event.target !== event.currentTarget) return;

    emit('click', event);
  }
</script>

<button on:click={handleClick}>
  <slot />
</button>

Parent component usage:

<!-- Combine multiple modifiers -->
<MyButton modifiers={{ preventDefault: true, stopPropagation: true }} on:click={handleClick}>
  Click me with multiple modifiers
</MyButton>

Why Your Initial Approach Didn't Work #

Svelte's event modifiers (other than once) are compiled directly into native DOM event handling logic, which only applies to actual DOM elements—not custom components. That's why you ran into the invalid-event-modifier error. By handling modifiers manually in the component's event handler, you're replicating that native behavior while keeping your component flexible.

Bonus: Forward All DOM Events #

If you want your component to behave even more like a native button, you can forward all DOM events from the underlying <button> to the parent using on:*:

<button on:* on:click={handleClick}>
  <slot />
</button>

This lets parent components listen to any native button event (like mouseover, focus) in addition to your custom-handled click event.

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