I would like to execute some function when the user presses for 2 seconds on a div.
Is it possible ?
Here is my code to detect the click on the
Upgrading and merging Editor and Kevin B replies you can have a fully functional, multi divs, hold-catcher with:
// Global delta msec timeout
var delta = 1500;
$("#foo").on('mousedown', function(event) {
var thisElement = $(event.currentTarget);
var deltaTimer = setTimeout(function(){
console.log('long press!');
thisElement.removeData('startTimestamp');
}, delta);
thisElement.data('startTimestamp', new Date().getTime());
thisElement.data('timer', deltaTimer);
}).on('mouseleave', function(event) {
var thisElement = $(event.currentTarget);
clearTimeout(thisElement.data('timer'));
thisElement.removeData('startTimestamp');
thisElement.removeData('timer');
}).on('mouseup', function(event) {
var thisElement = $(event.currentTarget);
var startTimestamp = thisElement.data('startTimestamp');
clearTimeout(thisElement.data('timer'));
if (startTimestamp !== undefined && !isNaN(parseInt(startTimestamp))) {
if (new Date().getTime() >= (startTimestamp + delta))
console.log('long press!');
else
console.log('short press!');
}
thisElement.removeData('startTimestamp');
thisElement.removeData('timer');
});