mpizenberg / elm-pep

Minimalist pointer events polyfill

elm-pep

Minimalist pointer events polyfill.

Contrary to the current standard polyfill for pointer events (jquery/PEP), this polyfill provides relative positions (offsetX and offsetY properties) and is compatible with elm JSON decoders (no cyclic attributes).

Usage

Import the elm-pep.js file in your web page. The implemented pointer events are:

• pointerdown
• pointermove
• pointerup

If the PointerEvent API is not supported in the browser, this will attach mouse and touch events to the document. When triggered, it transforms the mouse or touch event into a pointer event and dispatch it.

Caveats

This is not a fully featured polyfill.

This code is truly minimalist and simple so probably not very computing efficient. It does not aim at supporting old browsers, only recent browsers that do not support pointer events yet.

This code focuses on unifying the touch and mouse APIs and thus only provides the pointerId and isPrimary properties specific to pointer events.

Contributors

• Matthieu Pizenberg - @mpizenberg
• Thomas Forgione - @tforgione
• Robert Vollmert - @robx (iOS debugging)

elm-pep's Issues

Add pointercancel emulation?

There is a touchcancel but no mousecancel so should we add this?

Mouse emulation on touch device doubles the pointer events

On touch devices, a "tap" on the touch surface will generate an emulated mouse click few millisecond later. This behavior is to reduce the potential non usability of websites that do not take into account touch interactions.

In our case, this is an issue since it doubles the number of pointer events generated. An example of this problem is testable with this JS fiddle : https://jsfiddle.net/6aw0z9hL/1/
Try a "tap" with either a touch device (smartphone/tablet) or firefox in responsive mode with touch activated.

I read that event.preventDefault() should prevent this emulated mouse event from happening but it is not the case in the example above.

no primary events on iOS

This was initially reported to the demo project: mpizenberg-archived/demo-elm-image-annotation#1. I've since narrowed the issue down a bit.

Serving the code at https://ellie-app.com/993kLCWvga1/0 locally and testing with iOS, it turns out that touch.identifier is a "random" large integer, so the primary detection based on identifer == 0 does not work.

It seems that to do this correctly, it would be necessary to keep some state. (E.g. for a sequence finger-1-down finger-2-down finger-1-up finger-2-up.)