You can register a mouseDown event handler on the button and only process the .click()
event if the .click()
event occurs within a certain time after the mouseDown (e.g. a second).
function now() {
return (new Date()).getTime();
}
$("#myButton").on("mousedown click", function(e) {
var self = $(this);
if (e.type === "mousedown") {
self.data("mousedownTime", now());
} else {
var mouseTime = self.data("mousedownTime");
if (mouseTime && now() - mouseTime < 1000) {
// process the click here
}
}
});
This could be turned into a jQuery plugin method that would do this for you, fairly easily.
jQuery.fn.realClick = function(fn) {
this.on("mousedown click", function(e) {
var self = $(this);
if (e.type === "mousedown") {
self.data("mousedownTime", now());
} else {
var mouseTime = self.data("mousedownTime");
if (mouseTime && now() - mouseTime < 1000) {
// process the real click here
return fn(e);
}
}
});
}
$("#myButton").realClick(function(e) {
// your click processing code here
// only gets called if a click event was
// preceded by a mousedown event within 1 second
});