Holdable button on JS. How need rewrite code for correctly work on mobile devices?

Question

Holdable button works on desktop, but doesn't work on mobile

clicker.mousedown(function(){
    timeout = setInterval(function(){
        clicker.text(count++);
    }, 500);

    return false;
});

http://jsfiddle.net/8FmRd/ what's wrong?

Answer 1

You need to use touchstart and touchend events to detect a touch on a button on mobile devices. On some devices touchmove might also trigger so you can also check for that.

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

Answer 2

To do it by actual hold, you'd do something like:

var timeoutContainer;

// this should work with mouse only

$el.on('mousedown', function(ev) {
    if(ev.type=='click'){
        timeoutContainer = setInterval(function(){
        // your stuff.
        }, timeToHold);
    }
}); 

$el.on('mouseup', function(ev) {
    clearInterval(timeoutContainer);
}); 

// or, if you only want to apply it to touch. 

$el.on('touchstart', function(ev) {
    timeoutContainer = setTimeout(function(){
    // your stuff.
    }, timeToHold);
}); 

$el.on('touchend', function(ev) {
    clearTimeout(timeoutContainer);
}); 

After looking at your fiddle, it may not be working as expected because of touchcancel. I noticed you have document.mouseup. It might be treating moving finger as a mouse up or something. If you do it explicitly as touch start it may behave differently. You'd need to check for mobile before as above in the mouse down part.