Implementing preventDefault on an Elm click listener

Every now and again, an onClick Elm listener will result in the browser changing the page. I’m not quite sure why this only happens occasionally with some buttons, but here is a workaround that implements a new listener that enforces preventDefault, stopping this from happening:

onClickPreventDefault : Signal.Address a -> a -> Attribute
onClickPreventDefault address msg =
  onWithOptions "click" { preventDefault = True, stopPropagation = True } JD.value (\_ -> Signal.message address msg)

It can be used as a drop in replacement for onClick.

Leave a Reply

Your email address will not be published. Required fields are marked *