pointer events

Pointer Events

3. June 2014 | Martin Wittemann

• Master of Science (2009)

• 1&1 Internet AG

• Head of Frameworks & Tooling

• Tech Lead of qooxdoo open source framework

Martin Wittemann

What?

[1] http://www.w3.org/TR/pointerevents/

• Spec1

• Started November 2012

• Latests Version: May 2013

• State: Candidate Recommendation

• Editors: Microsoft / Mozilla

Problem

Problem

Mouse

Problem

Mouse Touch

Problem

Mouse Touch Pen

What?

Mouse Touch Pen

What?

MouseTouchPen

Pointer

Mouse Events

<div>

Log

<div>

Sample: http://codepen.io/anon/pen/IngAK

Mouse Events

<div>

Log

<div>

mousemovemousemove…

Mouse Events

<div>

Log

<div>

mousemovemousemove…mouseovermouseenter

Mouse Events

<div>

Log

<div>

mousemovemousemove…mouseovermouseentermousedown

Mouse Events

<div>

Log

<div>

mousemovemousemove…mouseovermouseentermousedownmouseupclick

Mouse Events

<div>

Log

<div>

mousemovemousemove…mouseovermouseentermousedownmouseupclickmouseoutmouseover

Mouse Events

<div>

Log

<div>

mousemovemousemove…mouseovermouseentermousedownmouseupclickmouseoutmouseovermouseoutmouseover

Mouse Events

<div>

Log

<div>

mousemovemousemove…mouseovermouseentermousedownmouseupclickmouseoutmouseovermouseoutmouseovermouseoutmouseleave

Touch Events

<div>

Log

Sample: http://codepen.io/anon/pen/vqIFh

Touch Events

<div>

Log

Touch Events

<div>

Logtouchstart

Touch Events

<div>

Logtouchstarttouchmove…

Touch Events

<div>

Logtouchstarttouchmove…touchend

Touch Events

<div>

Logtouchstarttouchmove…touchend

touchstart

Touch Events

<div>

Logtouchstarttouchmove…touchend

touchstarttouchmove

Touch Events

<div>

Logtouchstarttouchmove…touchend

touchstarttouchmovetouchcancel

Mouse events on touch

<div>

Log

Sample: http://codepen.io/anon/pen/mqaCw

Mouse events on touch

<div>

Logtouchstart

Mouse events on touch

<div>

Logtouchstarttouchend

Mouse events on touch

<div>

Logtouchstarttouchend300ms delaymouseentermouseovermousedownmouseupclick

Idea of Pointer• Stick to the mouse event

• Event types extend mouse events

MouseEvent PointerEvent

el.addEventListener("mousedown" , function(event) { // …});

Idea of Pointer• Stick to the mouse event

• Event types extend mouse events

MouseEvent PointerEvent

el.addEventListener("mousedown" , function(event) { // …});

"pointerdown"

CompareMouse Touch Pointer

mousemove touchmove pointermovemouseover pointerovermouseout pointerout

!mousedown touchstart pointerdownmouseup touchend pointerup

mouseenter pointerentermouseleave pointerleave

touchcancel pointercancelclick

dblclick mousewheelcontextmenu

CompareMouse Touch Pointer

mousemove touchmove pointermovemouseover pointerovermouseout pointerout

!mousedown touchstart pointerdownmouseup touchend pointerup

mouseenter pointerentermouseleave pointerleave

touchcancel pointercancelclick

dblclick mousewheelcontextmenu

CompareMouse Touch Pointer

mousemove touchmove pointermovemouseover pointerovermouseout pointerout

!mousedown touchstart pointerdownmouseup touchend pointerup

mouseenter pointerentermouseleave pointerleave

touchcancel pointercancelclick

dblclick mousewheelcontextmenu

CompareMouse Touch Pointer

mousemove touchmove pointermovemouseover pointerovermouseout pointerout

!mousedown touchstart pointerdownmouseup touchend pointerup

mouseenter pointerentermouseleave pointerleave

touchcancel pointercancelclick

dblclick mousewheelcontextmenu

CompareMouse Touch Pointer

mousemove touchmove pointermovemouseover pointerovermouseout pointerout

!mousedown touchstart pointerdownmouseup touchend pointerup

mouseenter pointerentermouseleave pointerleave

touchcancel pointercancelclick

dblclick mousewheelcontextmenu

CompareMouse Touch Pointer

mousemove touchmove pointermovemouseover pointerovermouseout pointerout

!mousedown touchstart pointerdownmouseup touchend pointerup

mouseenter pointerentermouseleave pointerleave

touchcancel pointercancelclick

dblclick mousewheelcontextmenu

Pointer Events (Mouse)

<div>

Log

Sample: http://codepen.io/anon/pen/EnlFp

Pointer Events (Mouse)

<div>

Logpointermovepointermove…

Pointer Events (Mouse)

<div>

Logpointermovepointermove…pointeroverpointerenter

Pointer Events (Mouse)

<div>

Logpointermovepointermove…pointeroverpointerenterpointerdown

Pointer Events (Mouse)

<div>

Logpointermovepointermove…pointeroverpointerenterpointerdownpointerup

Pointer Events (Mouse)

<div>

Log

pointeroutpointerleave

pointermovepointermove…pointeroverpointerenterpointerdownpointerup

Pointer Events (Touch)

<div>

Log

Pointer Events (Touch)

<div>

Log

Pointer Events (Touch)

<div>

Logpointeroverpointerenterpointerdown

Pointer Events (Touch)

<div>

Logpointeroverpointerenterpointerdownpointeruppointeroutpointerleave

Pointer (Multi Touch)

<div>

Log

Pointer (Multi Touch)

<div>

Logpointeroverpointerenterpointerdown

Pointer (Multi Touch)

<div>

Logpointeroverpointerenterpointerdownpointeroverpointerenterpointerdown

Pointer (Multi Touch)

<div>

Logpointeroverpointerenterpointerdownpointeroverpointerenterpointerdownpointeruppointeroutpointerleavepointeruppointeroutpointerleave

Event Attributes

•pointerId

•pointerType

•isPrimary

•width / height

•pressure

•tiltX / tiltY

!!!!!!!!!!!!!!

Event Attributes

unique id e.g. 3219210

•pointerId

•pointerType

•isPrimary

•width / height

•pressure

•tiltX / tiltY

!!!!!!!!!!!!!!

Event Attributes

mouse, touch or pen as String

•pointerId

•pointerType

•isPrimary

•width / height

•pressure

•tiltX / tiltY

!!!!!!!!!!!!!!

Event Attributes

true for first pointer

•pointerId

•pointerType

•isPrimary

•width / height

•pressure

•tiltX / tiltY

!!!!!!!!!!!!!!

Event Attributes

Dimensions of the touch impact

•pointerId

•pointerType

•isPrimary

•width / height

•pressure

•tiltX / tiltY

!!!!!!!!!!!!!!

Event Attributes

Pressure of the impact in a range from 0 to 1

•pointerId

•pointerType

•isPrimary

•width / height

•pressure

•tiltX / tiltY

!!!!!!!!!!!!!!

Event Attributes

The angle of e.g. the pen in a range from -90 to 90

•pointerId

•pointerType

•isPrimary

•width / height

•pressure

•tiltX / tiltY

Capturing

• Additional Element API • setPointerCapture(pointerId)

• releasePointerCapture(pointerId)

• Additional events • gotpointercapture

• lostpointercapture

Pointer capture allows the events for a particular pointer to be retargeted to a particular element

touch-action CSS property for controlling the event behavior

touch-action CSS property for controlling the event behavior

<div style="touch-action: none;"> This element receives pointer events for all touches.</div>

touch-action CSS property for controlling the event behavior

<div style="touch-action: none;"> This element receives pointer events for all touches.</div>

<div style="touch-action: pan-x;"> This element receives pointer events when not panning in the horizontal direction.</div>

touch-action CSS property for controlling the event behavior

<div style="touch-action: none;"> This element receives pointer events for all touches.</div>

<div style="touch-action: pan-x;"> This element receives pointer events when not panning in the horizontal direction.</div>

Other values: auto, pan-y

Implementation

✓since 10 ~ planned ~ planned ✗ no

https://code.google.com/p/chromium/issues/detail?id=196799

https://bugzilla.mozilla.org/

show_bug.cgi?id=822898

https://bugs.webkit.org/show_bug.cgi?

id=105463

Polyfills

• PointerEvents

• HandJS

• pointer.js

• Points.js

!

• qooxdoo

https://github.com/polymer/PointerEvents

https://handjs.codeplex.com/

https://github.com/borismus/pointer.js/

https://github.com/Rich-Harris/Points

http://qooxdoo.org/

What’s not included?

• Gestures like tap, rotate, swipe, …

• Abstraction for the wheel event

Advice

Not ready to use!

Advice

Not ready to use!

Ok with a polyfill.1

[1] Depending on the required browser support