CODEWITHSUNDEEP
javascriptjqueryjquery-mobilemobiletouch
Miloš Đakonović
Miloš Đakonović

Reputation: 3871

How to detect touchmove length/offsets?

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

Upvotes: 4

Views: 6072

Answers (2)

user1055212
user1055212

Reputation: 469

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;
}

Upvotes: 2

Cariboutis
Cariboutis

Reputation: 311

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.

Upvotes: 4

Related Questions