Variation of e.touches, e.targetTouches and e.changedTouches

by

We have the following lists:

  • touches: A list of information for every finger currently touching the screen
  • targetTouches: Like touches, but is filtered to only the information for finger touches that started out within the same node
  • changedTouches: A list of information for every finger involved in the event

To better understand what might be in these lists, let’s go over some examples quickly. They vary according to the following rules:

  • When I put a finger down, all three lists will have the same information. It will be in changedTouches because putting the finger down is what caused the event
  • When I put a second finger down, touches will have two items, one for each finger. targetTouches will have two items only if the finger was placed in the same node as the first finger. changedTouches will have the information related to the second finger, because it’s what caused the event
  • If I put two fingers down at exactly the same time, it’s possible to have two items in changedTouches, one for each finger
  • If I move my fingers, the only list that will change is changedTouches and will contain information related to as many fingers as have moved (at least one).
  • When I lift a finger, it will be removed from touches, targetTouches and will appear in changedTouches since it’s what caused the event
  • Removing my last finger will leave touches and targetTouches empty, and changedTouches will contain information for the last finger

More Related Contents:

  1. Convert Data URI to File then append to FormData
  2. What’s the best way to detect a ‘touch screen’ device using JavaScript?
  3. Do common JavaScript implementations use string interning?
  4. Getting BLOB data from XHR request
  5. Binding multiple events to a listener (without JQuery)?
  6. How do I print an IFrame from javascript in Safari/Chrome
  7. Javascript Drag and drop for touch devices [closed]
  8. How do I re-trigger a WebKit CSS animation via JavaScript?
  9. JavaScript: Is there a way to get Chrome to break on all errors?
  10. How do you handle oncut, oncopy, and onpaste in jQuery?
  11. Webkit-based blurry/distorted text post-animation via translate3d
  12. iPad/iPhone browser crashing when loading images in Javascript
  13. Call JavaScript function from native code in WKWebView
  14. Open Safari / Google Chrome developer tools programmatically from JavaScript
  15. Detecting that the browser has no mouse and is touch-only
  16. jQuery on ‘double click’ event (dblclick for mobile)
  17. HTML book-like pagination
  18. jQuery get the location of an element relative to window
  19. programmatically changing webkit-transformation values in animation rules
  20. prevent touchstart when swiping
  21. webkit-transform overwrites z-index ordering in Chrome 13
  22. Why does Firefox react differently from Webkit and IE to “click” event on “select” tag?
  23. Consider marking event handler as ‘passive’ to make the page more responsive
  24. jQuery/JS, iOS 4 and $(document).height() problems
  25. Is there a way to use the Web Audio API to sample audio faster than real-time?
  26. How do I access an iframe from CasperJS?
  27. “Unsafe JavaScript attempt to access frame with URL…” error being continuously generated in Chrome webkit inspector
  28. How to optimize website for touch devices
  29. INVALID_STATE_ERR: DOM Exception 11 (WebKit)
  30. manually trigger touch event

Leave a Comment