pointer events

Download Pointer events

Post on 05-Dec-2014

446 views

Category:

Technology

6 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • 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
  • 5. Problem Mouse
  • 6. Problem Mouse Touch
  • 7. Problem Mouse Touch Pen
  • 8. What? Mouse Touch Pen
  • 9. What? MouseTouchPen Pointer
  • 10. Mouse Events
    Log
    Sample: http://codepen.io/anon/pen/IngAK
  • 11. Mouse Events
    Log
    mousemove mousemove
  • 12. Mouse Events
    Log
    mousemove mousemove mouseover mouseenter
  • 13. Mouse Events
    Log
    mousemove mousemove mouseover mouseenter mousedown
  • 14. Mouse Events
    Log
    mousemove mousemove mouseover mouseenter mousedown mouseup click
  • 15. Mouse Events
    Log
    mousemove mousemove mouseover mouseenter mousedown mouseup click mouseout mouseover
  • 16. Mouse Events
    Log
    mousemove mousemove mouseover mouseenter mousedown mouseup click mouseout mouseover mouseout mouseover
  • 17. Mouse Events
    Log
    mousemove mousemove mouseover mouseenter mousedown mouseup click mouseout mouseover mouseout mouseover mouseout mouseleave
  • 18. Touch Events
    Log Sample: http://codepen.io/anon/pen/vqIFh
  • 19. Touch Events
    Log
  • 20. Touch Events
    Log touchstart
  • 21. Touch Events
    Log touchstart touchmove
  • 22. Touch Events
    Log touchstart touchmove touchend
  • 23. Touch Events
    Log touchstart touchmove touchend touchstart
  • 24. Touch Events
    Log touchstart touchmove touchend touchstart touchmove
  • 25. Touch Events
    Log touchstart touchmove touchend touchstart touchmove touchcancel
  • 26. Mouse events on touch
    Log Sample: http://codepen.io/anon/pen/mqaCw
  • 27. Mouse events on touch
    Log touchstart
  • 28. Mouse events on touch
    Log touchstart touchend
  • 29. Mouse events on touch
    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)
    Log Sample: http://codepen.io/anon/pen/EnlFp