jQuery: Plugins to handle long click and taphold events
jQuery plugin to catch a long click event
Below is a simple jQuery plugin to catch a long click or long press:
(function ($) {
$.fn.longClick = function (callback, timeout) {
// bind to element's mousedown event to track the longclick's beginning
$(this).mousedown(function (event) {
// save the initial event object
var initialEvent = event;
// set the delay after which the callback will be called
var timer = window.setTimeout(function () { callback(initialEvent); }, timeout);
// bind to global mouseup event for clearance
$(document).mouseup(function () {
// clear timer
window.clearTimeout(timer);
// unbind from global mouseup event
$(document).unbind("mouseup");
return true;
// use 'return false;' if you need to prevent default handler and
// stop event bubbling
});
return true;
// use 'return false;' if you need to prevent default handler and
// stop event bubbling
});
};
})(jQuery);
...
// using
(function ($) {
$("#someDiv").longClick(function (e) {
alert($(e.target).attr("id") + " was clicked"); },
1500);
})(jQuery);
The plugin accepts a callback function that will be called once a long click event occurred and a timeout in milliseconds saying how long user should keep button pressed to produce the long click.
jQuery plugin to catch a taphold event
The same long click for iPad is usually called taphold and can be implemented as follows:
(function ($) {
$.fn.taphold = function (callback, timeout) {
// bind to element's touchstart event to track the taphold's beginning
$(this).bind("touchstart", function (event) {
// save the initial event object
var initialEvent = event;
// set the delay after which the callback will be called
var timer = window.setTimeout(function () { callback(initialEvent); }, timeout);
// bind to global touchend and touchcancel events for clearance
$(document).bind("touchend touchcancel", function () {
// clear timer
window.clearTimeout(timer);
// unbind from touchend and touchcancel events
$(document).unbind("touchend touchcancel");
return true;
// use 'return false;' if you need to prevent default handler and
// stop event bubbling
});
return true;
// use 'return false;' if you need to prevent default handler and
// stop event bubbling
});
};
})(jQuery);
...
// using
(function ($) {
$("#someDiv").taphold(function () {
alert($(e.target).attr("id") + " was tapholded"); },
1500);
})(jQuery);
The only difference from the previous plugin is that touchable device’s events are used.
Combined jQuery plugin to catch both long click and taphold events
Two shown above plugins can be quite easily combined in one. The new plugin checks if the current device is an iPad and, if so, deals with such iPad events as touchstart, touchend and touchcancel; otherwise, it uses traditional mousedown and mouseup.
(function ($) {
$.fn.longclick = function (callback, timeout) {
var isIPad = $.isIPad();
var startEvents = isIPad ? "touchstart" : "mousedown";
var endEvents = isIPad ? "touchend touchcancel" : "mouseup";
$(this).bind(startEvents, function (event) {
// save the initial event object
var initialEvent = event;
// set delay after which the callback will be called
var timer = window.setTimeout(function () { callback(initialEvent); }, timeout);
// bind to global event(s) for clearance
$(document).bind(endEvents, function () {
// clear timer
window.clearTimeout(timer);
// reset global event handlers
$(document).unbind(endEvents);
return true;
// use 'return false;' if you need to prevent default handler and
// stop event bubbling
});
return true;
// use 'return false;' if you need to prevent default handler and
// stop event bubbling
});
};
})(jQuery);
...
// using
(function ($) {
$("#someDiv").longclick(function () {
alert($(e.target).attr("id") + " was clicked"); },
1500);
})(jQuery);
Note that the isIPad plugin was described in the post – jQuery: Plugins to detect iPad and iPhone devices.