1

How can i get the id of the elements under my finger during touchmove?

What i want to achieve is:

  • bind touch[start|end|move]
  • on touchstart start selection
  • during touchmove collect all dom elements "touched" under my finger

example code

var collected = [];
$('body').bind('touchstart touchmove touchend', function(event) {
  event.preventDefault();
  if(event.type == 'touchstart') {
    collected = [];
  } else if(event.type == 'touchmove') {
    // id of the element under my finger??
    // insert in collected the id of the element
  } else if(event.type == 'touchend') {
    // some code
  }
});

solved.

Deneb
  • 13
  • 1
  • 5

1 Answers1

1

You can find information about all touch events in Safari here. jQuery does not have any touch event handlers, you would need to define them yourselve. Taken from this stackoverflow post

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
    var touch = e.touches[0];
    alert(touch.pageX + " - " + touch.pageY);
}, false);

This way you could define your way through all touch gestures.

Community
  • 1
  • 1
toxicate20
  • 5,270
  • 3
  • 26
  • 38
  • touchstart and touchend are fired correctly; should be the same for touchmove, or not? – Deneb Nov 19 '12 at 17:47
  • yes, this should be the case. else you are dealing with a bug – toxicate20 Nov 19 '12 at 17:49
  • ok, now i can get the touched [x,y] coords, how can i locate the elements? – Deneb Nov 19 '12 at 18:22
  • ok, now i can get the element id with $(document.elementFromPoint(touch.pageX, touch.pageY)), it workd fine in the default android browser and opera; but not in Chrome; any advice to fix it? It seems that it find the element at "different" positions – Deneb Nov 19 '12 at 18:36