In this blog post I show a quick implementation of the jQuery Finger library for long press / taphold functionality on mobile devices. It will only work on mobile devices of course.
The Code
// define the touch area
$('.toucharea').on('press', function(e) {
$(this).text('Pressed').css('background', 'green');
})
// return back to original state by tapping the touch area
.on('tap', this, function(e) {
$(this).text('Press').css('background', 'blue')
});
// prevent default mobile context menus
window.oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation();
return false;
};
The jQuery finger plugin provides us with several event handlers; the ones we are using in this example are press and tap. The press event is pretty much a long tap.
There are three parts to our code. The first part is to define the touch area by specifying the press event handler. The second part of the code defines the tap event handler. Then the last thing is to prevent the default contentmenu.
One other great thing about jQuery Finger is that it removes the 300ms delay on tapping. Which means you don’t need the fastclick.js library.
CodePen Example
See the Pen jQuery Finger Example (Mobile Only) by Mike Doubintchik (@allurewebsolutions) on CodePen.
