Upload
martin-wittemann
View
477
Download
6
Embed Size (px)
DESCRIPTION
Citation preview
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
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