Timed long press in Javascript within jQuery phonegap app

Question

There is a good example for doing long press in Javascript here: Long Press in JavaScript?

But it does not provide for knowing the duration of the press.

If I want to do different things based on the length of the press I cant use the pattern in that post.

I was trying to do something similar by saving current time in a variable on('mousedown') and then calculating the time difference on('mouseup') . this works fine within a normal Javasript page in a "normal" browser.

However within my phonegap app something happens, looks like the mouseup event is not being called if the finger is kept on the screen for a long duration (say 5 sec..).

Is this some native mobile browser behavior? Can I override it somehow?

I am using plain jQuery not jQuery mobile.

Any ideas anyone?

Answer 1

You could have a look at how the taphold and vmouseup ( handleTouchEnd() line 752) events are implemented in jQuery mobile source code.

Since it is already tested and implemented I'd suggest to use jquery mobile instead of jquery and modify (since it already handles all the 'quirks' related each mobile browser), and change the code as you need.

Answer 2

You can check the time to identify Click or Long Press [jQuery]

function AddButtonEventListener() {
try {
var mousedowntime;
var presstime;
$("button[id$='" + buttonID + "']").mousedown(function() {
    var d = new Date();
    mousedowntime = d.getTime();
});
$("button[id$='" + buttonID + "']").mouseup(function() {
    var d = new Date();
    presstime = d.getTime() - mousedowntime;
    if (presstime > 999/*You can decide the time*/) {
        //Do_Action_Long_Press_Event();
    }
    else {
        //Do_Action_Click_Event();
    }
});
}
catch (err) {
    alert(err.message);
}
} 

Answer 3

Note that this solution is usefull if you do not use jQuery Mobile for some reason. I used the article Fast Touch Event Handling and just added a piece of code

$.event.special.tap = {
distanceThreshold: 10,
timeThreshold: 350,
setup: function () {
    var self = this,
        $self = $(self);

    // Bind touch start
    $self.on('touchstart', function (startEvent) {
        // Save the target element of the start event
        var target = startEvent.target,
            touchStart = startEvent.originalEvent.touches[0],
            startX = touchStart.pageX,
            startY = touchStart.pageY,
            threshold = $.event.special.tap.distanceThreshold,
            timeout,
            expired = false;

        function timerFired() {
            expired = true;
        }

        function removeTapHandler() {
            clearTimeout(timeout);
            $self.off('touchmove', moveHandler).off('touchend', tapHandler).off('touchcancel', removeTapHandler);
        };

        function tapHandler(endEvent) {
            removeTapHandler();
            if (target == endEvent.target) {
                if (expired) {
                    $.event.simulate('longtap', self, endEvent);
                } else {
                    $.event.simulate('tap', self, endEvent);
                }
            }
        };

        // Remove tap and move handlers if the touch moves too far
        function moveHandler(moveEvent) {
            var touchMove = moveEvent.originalEvent.touches[0],
                moveX = touchMove.pageX,
                moveY = touchMove.pageY;

            if (Math.abs(moveX - startX) > threshold || Math.abs(moveY - startY) > threshold) {
                removeTapHandler();
            }
        };

        // Remove the tap and move handlers if the timeout expires
        timeout = setTimeout(timerFired, $.event.special.tap.timeThreshold);

        // When a touch starts, bind a touch end and touch move handler
        $self.on('touchmove', moveHandler).on('touchend', tapHandler).on('touchcancel', removeTapHandler);
    });
}

};

So, now I have a tap and a longtap events