tery.blargh
tery.blargh

Reputation: 405

Cordova - 'touchmove' Event doesn't fire right away

I have this simple code:

document.addEventListener('touchmove', onDocumentTouchMove, false);

function onDocumentTouchMove(event)
{
    for(var i = 0; i < event.touches.length; i++)
    {
        clickX[i] = event.touches[i].pageX;
        clickY[i] = event.touches[i].pageY;
    }
}

What I'm trying to do is make the event 'touchmove' to fire right away, but it requires a specific amount of pixels to pass, like a threshold before it fires.

In my case, it seems like I must move my finger about half an inch before it fires. Is there a way of making it fire without having a threshold?

I'm trying to drag a simple box in my app, but it seems like it is checking for different events before it recognizes the 'touchmove' and makes it look ugly because of the delay.

This is a distance issue, not a time one.

Upvotes: 1

Views: 1486

Answers (1)

tery.blargh
tery.blargh

Reputation: 405

I was able to solve this by adding:

event.preventDefault();

inside my functions:

onDocumentTouchStart (prevents delay in firing other events)

onDocumentTouchMove (prevents scrolling)

document.addEventListener('touchstart', onDocumentTouchMove, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);

function onDocumentTouchStart(event)
{
    event.preventDefault(); //Allows firing of other events asap
    for(var i = 0; i < event.touches.length; i++)
    {
        clickX[i] = event.touches[i].pageX;
        clickY[i] = event.touches[i].pageY;
    }
}
function onDocumentTouchMove(event)
{
    event.preventDefault(); //Prevents Scrolling
    for(var i = 0; i < event.touches.length; i++)
    {
        clickX[i] = event.touches[i].pageX;
        clickY[i] = event.touches[i].pageY;
    }
}

Had this problem for months! Now it works beautifully in all my apps! :D

Also, here's a nice read on touch events:

https://www.w3.org/TR/touch-events/#dfn-touchmove

Upvotes: 2

Related Questions