Pointer events
•
3 likes•1,526 views
Pointer Events is a W3C specification that defines a unified event model for mouse, touch, and pen interactions. It aims to consolidate disparate mouse, touch, and pen events into a single pointer event model. Some key points of the specification include defining common event types like pointerdown, pointermove, and pointerup; adding attributes to events like pointerId and pointerType; and methods for capturing pointer events on specific elements. While several browsers have implemented parts of the specification, a polyfill is currently needed for full support across browsers.
Recommended
More Related Content
Viewers also liked
Viewers also liked (7)
Similar to Pointer events
Similar to Pointer events (20)
More from Martin Wittemann
Recently uploaded
Recently uploaded (20)
Pointer events
- 1. Pointer Events 3. June 2014 | MartinWittemann
- 2. • Master of Science (2009) • 1&1 Internet AG • Head of Frameworks & Tooling • Tech Lead of qooxdoo open source framework Martin Wittemann
- 3. What? [1] http://www.w3.org/TR/pointerevents/ • Spec1 • Started November 2012 • LatestsVersion: May 2013 • State: Candidate Recommendation • Editors: Microsoft / Mozilla
- 4. Problem
- 26. Mouse events on touch <div> Log Sample: http://codepen.io/anon/pen/mqaCw
- 27. Mouse events on touch <div> Log touchstart
- 28. Mouse events on touch <div> Log touchstart touchend
- 29. Mouse events on touch <div> Log touchstart touchend 300ms delay mouseenter mouseover mousedown mouseup click
- 30. Idea of Pointer • Stick to the mouse event • Event types extend mouse events MouseEvent PointerEvent el.addEventListener("mousedown" , function(event) { // … });
- 31. Idea of Pointer • Stick to the mouse event • Event types extend mouse events MouseEvent PointerEvent el.addEventListener("mousedown" , function(event) { // … }); "pointerdown"
- 32. Compare Mouse Touch Pointer mousemove touchmove pointermove mouseover pointerover mouseout pointerout !mousedown touchstart pointerdown mouseup touchend pointerup mouseenter pointerenter mouseleave pointerleave touchcancel pointercancel click dblclick mousewheel contextmenu
- 33. Compare Mouse Touch Pointer mousemove touchmove pointermove mouseover pointerover mouseout pointerout !mousedown touchstart pointerdown mouseup touchend pointerup mouseenter pointerenter mouseleave pointerleave touchcancel pointercancel click dblclick mousewheel contextmenu
- 34. Compare Mouse Touch Pointer mousemove touchmove pointermove mouseover pointerover mouseout pointerout !mousedown touchstart pointerdown mouseup touchend pointerup mouseenter pointerenter mouseleave pointerleave touchcancel pointercancel click dblclick mousewheel contextmenu
- 35. Compare Mouse Touch Pointer mousemove touchmove pointermove mouseover pointerover mouseout pointerout !mousedown touchstart pointerdown mouseup touchend pointerup mouseenter pointerenter mouseleave pointerleave touchcancel pointercancel click dblclick mousewheel contextmenu
- 36. Compare Mouse Touch Pointer mousemove touchmove pointermove mouseover pointerover mouseout pointerout !mousedown touchstart pointerdown mouseup touchend pointerup mouseenter pointerenter mouseleave pointerleave touchcancel pointercancel click dblclick mousewheel contextmenu
- 37. Compare Mouse Touch Pointer mousemove touchmove pointermove mouseover pointerover mouseout pointerout !mousedown touchstart pointerdown mouseup touchend pointerup mouseenter pointerenter mouseleave pointerleave touchcancel pointercancel click dblclick mousewheel contextmenu
- 38. Pointer Events (Mouse) <div> Log Sample: http://codepen.io/anon/pen/EnlFp
- 52. Event Attributes •pointerId •pointerType •isPrimary •width / height •pressure •tiltX / tiltY
- 53. ! ! ! ! ! ! ! ! ! ! ! ! ! ! Event Attributes unique id e.g. 3219210 •pointerId •pointerType •isPrimary •width / height •pressure •tiltX / tiltY
- 54. ! ! ! ! ! ! ! ! ! ! ! ! ! ! Event Attributes mouse, touch or pen as String •pointerId •pointerType •isPrimary •width / height •pressure •tiltX / tiltY
- 55. ! ! ! ! ! ! ! ! ! ! ! ! ! ! Event Attributes true for first pointer •pointerId •pointerType •isPrimary •width / height •pressure •tiltX / tiltY
- 56. ! ! ! ! ! ! ! ! ! ! ! ! ! ! Event Attributes Dimensions of the touch impact •pointerId •pointerType •isPrimary •width / height •pressure •tiltX / tiltY
- 57. ! ! ! ! ! ! ! ! ! ! ! ! ! ! Event Attributes Pressure of the impact in a range from 0 to 1 •pointerId •pointerType •isPrimary •width / height •pressure •tiltX / tiltY
- 58. ! ! ! ! ! ! ! ! ! ! ! ! ! ! Event Attributes The angle of e.g. the pen in a range from -90 to 90 •pointerId •pointerType •isPrimary •width / height •pressure •tiltX / tiltY
- 59. 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
- 60. touch-action CSS property for controlling the event behavior
- 61. touch-action CSS property for controlling the event behavior <div style="touch-action: none;"> This element receives pointer events for all touches. </div>
- 62. 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>
- 63. 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
- 64. 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
- 65. 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/
- 66. What’s not included? • Gestures like tap, rotate, swipe, … • Abstraction for the wheel event
- 67. Advice Not ready to use!
- 68. Advice Not ready to use! Ok with a polyfill.1 [1] Depending on the required browser support