68
Pointer Events 3. June 2014 | Martin Wittemann

Pointer events

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Pointer events

Pointer Events

3. June 2014 | Martin Wittemann

Page 2: Pointer events

• Master of Science (2009)

• 1&1 Internet AG

• Head of Frameworks & Tooling

• Tech Lead of qooxdoo open source framework

Martin Wittemann

Page 3: Pointer events

What?

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

• Spec1

• Started November 2012

• Latests Version: May 2013

• State: Candidate Recommendation

• Editors: Microsoft / Mozilla

Page 4: Pointer events

Problem

Page 5: Pointer events

Problem

Mouse

Page 6: Pointer events

Problem

Mouse Touch

Page 7: Pointer events

Problem

Mouse Touch Pen

Page 8: Pointer events

What?

Mouse Touch Pen

Page 9: Pointer events

What?

MouseTouchPen

Pointer

Page 10: Pointer events

Mouse Events

<div>

Log

<div>

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

Page 11: Pointer events

Mouse Events

<div>

Log

<div>

mousemovemousemove…

Page 12: Pointer events

Mouse Events

<div>

Log

<div>

mousemovemousemove…mouseovermouseenter

Page 13: Pointer events

Mouse Events

<div>

Log

<div>

mousemovemousemove…mouseovermouseentermousedown

Page 14: Pointer events

Mouse Events

<div>

Log

<div>

mousemovemousemove…mouseovermouseentermousedownmouseupclick

Page 15: Pointer events

Mouse Events

<div>

Log

<div>

mousemovemousemove…mouseovermouseentermousedownmouseupclickmouseoutmouseover

Page 16: Pointer events

Mouse Events

<div>

Log

<div>

mousemovemousemove…mouseovermouseentermousedownmouseupclickmouseoutmouseovermouseoutmouseover

Page 17: Pointer events

Mouse Events

<div>

Log

<div>

mousemovemousemove…mouseovermouseentermousedownmouseupclickmouseoutmouseovermouseoutmouseovermouseoutmouseleave

Page 18: Pointer events

Touch Events

<div>

Log

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

Page 19: Pointer events

Touch Events

<div>

Log

Page 20: Pointer events

Touch Events

<div>

Logtouchstart

Page 21: Pointer events

Touch Events

<div>

Logtouchstarttouchmove…

Page 22: Pointer events

Touch Events

<div>

Logtouchstarttouchmove…touchend

Page 23: Pointer events

Touch Events

<div>

Logtouchstarttouchmove…touchend

touchstart

Page 24: Pointer events

Touch Events

<div>

Logtouchstarttouchmove…touchend

touchstarttouchmove

Page 25: Pointer events

Touch Events

<div>

Logtouchstarttouchmove…touchend

touchstarttouchmovetouchcancel

Page 26: Pointer events

Mouse events on touch

<div>

Log

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

Page 27: Pointer events

Mouse events on touch

<div>

Logtouchstart

Page 28: Pointer events

Mouse events on touch

<div>

Logtouchstarttouchend

Page 29: Pointer events

Mouse events on touch

<div>

Logtouchstarttouchend300ms delaymouseentermouseovermousedownmouseupclick

Page 30: Pointer events

Idea of Pointer• Stick to the mouse event

• Event types extend mouse events

MouseEvent PointerEvent

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

Page 31: Pointer events

Idea of Pointer• Stick to the mouse event

• Event types extend mouse events

MouseEvent PointerEvent

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

"pointerdown"

Page 32: Pointer events

CompareMouse Touch Pointer

mousemove touchmove pointermovemouseover pointerovermouseout pointerout

!mousedown touchstart pointerdownmouseup touchend pointerup

mouseenter pointerentermouseleave pointerleave

touchcancel pointercancelclick

dblclick mousewheelcontextmenu

Page 33: Pointer events

CompareMouse Touch Pointer

mousemove touchmove pointermovemouseover pointerovermouseout pointerout

!mousedown touchstart pointerdownmouseup touchend pointerup

mouseenter pointerentermouseleave pointerleave

touchcancel pointercancelclick

dblclick mousewheelcontextmenu

Page 34: Pointer events

CompareMouse Touch Pointer

mousemove touchmove pointermovemouseover pointerovermouseout pointerout

!mousedown touchstart pointerdownmouseup touchend pointerup

mouseenter pointerentermouseleave pointerleave

touchcancel pointercancelclick

dblclick mousewheelcontextmenu

Page 35: Pointer events

CompareMouse Touch Pointer

mousemove touchmove pointermovemouseover pointerovermouseout pointerout

!mousedown touchstart pointerdownmouseup touchend pointerup

mouseenter pointerentermouseleave pointerleave

touchcancel pointercancelclick

dblclick mousewheelcontextmenu

Page 36: Pointer events

CompareMouse Touch Pointer

mousemove touchmove pointermovemouseover pointerovermouseout pointerout

!mousedown touchstart pointerdownmouseup touchend pointerup

mouseenter pointerentermouseleave pointerleave

touchcancel pointercancelclick

dblclick mousewheelcontextmenu

Page 37: Pointer events

CompareMouse Touch Pointer

mousemove touchmove pointermovemouseover pointerovermouseout pointerout

!mousedown touchstart pointerdownmouseup touchend pointerup

mouseenter pointerentermouseleave pointerleave

touchcancel pointercancelclick

dblclick mousewheelcontextmenu

Page 38: Pointer events

Pointer Events (Mouse)

<div>

Log

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

Page 39: Pointer events

Pointer Events (Mouse)

<div>

Logpointermovepointermove…

Page 40: Pointer events

Pointer Events (Mouse)

<div>

Logpointermovepointermove…pointeroverpointerenter

Page 41: Pointer events

Pointer Events (Mouse)

<div>

Logpointermovepointermove…pointeroverpointerenterpointerdown

Page 42: Pointer events

Pointer Events (Mouse)

<div>

Logpointermovepointermove…pointeroverpointerenterpointerdownpointerup

Page 43: Pointer events

Pointer Events (Mouse)

<div>

Log

pointeroutpointerleave

pointermovepointermove…pointeroverpointerenterpointerdownpointerup

Page 44: Pointer events

Pointer Events (Touch)

<div>

Log

Page 45: Pointer events

Pointer Events (Touch)

<div>

Log

Page 46: Pointer events

Pointer Events (Touch)

<div>

Logpointeroverpointerenterpointerdown

Page 47: Pointer events

Pointer Events (Touch)

<div>

Logpointeroverpointerenterpointerdownpointeruppointeroutpointerleave

Page 48: Pointer events

Pointer (Multi Touch)

<div>

Log

Page 49: Pointer events

Pointer (Multi Touch)

<div>

Logpointeroverpointerenterpointerdown

Page 50: Pointer events

Pointer (Multi Touch)

<div>

Logpointeroverpointerenterpointerdownpointeroverpointerenterpointerdown

Page 51: Pointer events

Pointer (Multi Touch)

<div>

Logpointeroverpointerenterpointerdownpointeroverpointerenterpointerdownpointeruppointeroutpointerleavepointeruppointeroutpointerleave

Page 52: Pointer events

Event Attributes

•pointerId

•pointerType

•isPrimary

•width / height

•pressure

•tiltX / tiltY

Page 53: Pointer events

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

Event Attributes

unique id e.g. 3219210

•pointerId

•pointerType

•isPrimary

•width / height

•pressure

•tiltX / tiltY

Page 54: Pointer events

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

Event Attributes

mouse, touch or pen as String

•pointerId

•pointerType

•isPrimary

•width / height

•pressure

•tiltX / tiltY

Page 55: Pointer events

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

Event Attributes

true for first pointer

•pointerId

•pointerType

•isPrimary

•width / height

•pressure

•tiltX / tiltY

Page 56: Pointer events

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

Event Attributes

Dimensions of the touch impact

•pointerId

•pointerType

•isPrimary

•width / height

•pressure

•tiltX / tiltY

Page 57: Pointer events

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

Event Attributes

Pressure of the impact in a range from 0 to 1

•pointerId

•pointerType

•isPrimary

•width / height

•pressure

•tiltX / tiltY

Page 58: Pointer events

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

Event Attributes

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

•pointerId

•pointerType

•isPrimary

•width / height

•pressure

•tiltX / tiltY

Page 59: Pointer events

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

Page 60: Pointer events

touch-action CSS property for controlling the event behavior

Page 61: Pointer events

touch-action CSS property for controlling the event behavior

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

Page 62: Pointer events

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>

Page 63: Pointer events

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

Page 64: Pointer events

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

Page 65: Pointer events

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/

Page 66: Pointer events

What’s not included?

• Gestures like tap, rotate, swipe, …

• Abstraction for the wheel event

Page 67: Pointer events

Advice

Not ready to use!

Page 68: Pointer events

Advice

Not ready to use!

Ok with a polyfill.1

[1] Depending on the required browser support