How to detect touchmove length/offsets?

Question

In developer tools I can see that touchmove event is fired multiple times while performing finger move*.

I'm looking for solution that should move div on which touchmove is performed - for exact number of touch move pixels, for either one or both axis.

What have I done so far?

I've tried to bind anonymous function to div's touchmove event, expecting that e argument of anonymous function will have something like offsetX & offsetY like mousemove do, so I could update position parameters of div accordingly.

Something like this:

$('div').on('touchmove', function(e){
  console.log(e);
  //e has no offset or similar param known to me
});

No results.

What should I do instead?

Special appeal: I will upvote any working solution, but accepted answer goes to the one that will give me at least a starting point about what should I do in plain JavaScript, without abstractions like jQuery mobile.

* I'm actually doing cursor touch emulation in Chrome dev tools

score 3 · Accepted Answer · answered Nov 05 '15 at 16:04

3

I would recommend looking at this article that demonstrates a simple setup for the "touchmove" event and obtaining the offset position in jQuery: http://www.devinrolsen.com/basic-jquery-touchmove-event-setup/

In case the article disappears, here is the code setup with the offset calculated from the event from the article.

$('#someElm').bind('touchmove',function(e){
  e.preventDefault();
  var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
  var elm = $(this).offset();
  var x = touch.pageX - elm.left;
  var y = touch.pageY - elm.top;
});

Hopefully this can help find a solution in plain javascript as well.

answered Nov 05 '15 at 16:04

Cariboutis

301
1
7

seems like that's what I'm looking for. Thanks. – Miloš Đakonović Nov 05 '15 at 16:17
Logged in just to upvote this. There is an alternative solution here that SEEMS "more correct":http://stackoverflow.com/questions/17130395/canvas-html5-real-mouse-position, but yours actually works. – VSO Apr 11 '16 at 20:51

score 2 · Answer 2 · edited Jul 23 '19 at 08:45

2

Here is a non jQuery solution.

function addTouchOffsets (event) {
    var touch = event.touches[0] || event.changedTouches[0];
    var realTarget = document.elementFromPoint(touch.clientX, touch.clientY);
    event.offsetX = touch.clientX-realTarget.getBoundingClientRect().x;
    event.offsetY = touch.clientY-realTarget.getBoundingClientRect().y
    return event;
}

edited Jul 23 '19 at 08:45

RamBa

42
6

answered Jan 25 '18 at 12:41

user1055212

469
4
13

How to detect touchmove length/offsets?

What have I done so far?

2 Answers2