event.preventDefault utility

Having a way to wrap your event handlers in some code can come in handy when you want to:

  • preventDefault
  • Add logging
  • Send metrics
<script lang="ts">
  const preventDefault = <T extends Event>(handler: (event: T) => void) => {
    return (event: T) => {
      event.preventDefault()
      handler(event)
    }
  }

  const onClick = (event: MouseEvent) => {
    console.log('Button clicked!', event)
  }
</script>

<button onclick={preventDefault(onClick)}>Button</button>