Search code examples
typescriptgoogle-chromefirefoxmouseevent

Why Chrome emits PointerEvents and Firefox MouseEvents and which type definition should I use in my code

I'm somewhat new to typescript and try to add type definitions to all my methods while being as precise as possible.

When I click in Chrome a PointerEvent is emitted. In Firefox a MouseEvent is emitted. I know that PointerEvent extends MouseEvent and according to https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent#browser_compatibility Firefox also supports these.

  1. Why does chrome emit a different event than Firefox
  2. Which type should I use in my event listeners (probably MouseEvent)
  3. and most importantly, how do I determine that if both show something different? (a.k.a is it safe to trust chrome or do I have to consult the documentation?)
Solution

  • This seems to be a bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1675847

    And in Safari too: https://bugs.webkit.org/show_bug.cgi?id=218665

    According to the specs: https://www.w3.org/TR/uievents/#event-type-click it's supposed to be a PointerEvent

    So until these bugs are fixed just use MouseEvent since PointerEvent inherits from MouseEvent (https://www.w3.org/TR/pointerevents3/#pointerevent-interface)