Javascript snack: click en doubleclick op hetzelfde elementJavascript snack: enable both click and doubleclick events on one element

HTML definieert de onClick en onDblClick events op alle elementen, en daarmee kun je leuke dingen doen. Maar, als je beide events definieert voor verschillende acties, gaat er wat mis. Bij een dubbelklik zal ook de onClick event tweemaal binnenkomen. En dat wil je niet. Dus, hier een kort stukje JavaScript om dat op te lossen:

// gebruik deze functies om zowel onclick als ondblclick 
// in te schakelen op een element:
// gebruik: onclick="singleClick(someFunction)" 
//          ondblclick="doubleClick(otherFunction)"

singleClickTimeout = null;
function singleClick(fcn) {
    if (singleClickTimeout == null) {
        singleClickTimeout = setTimeout(function() {
            singleClickTimeout = null;
            fcn();
        }, 500);
    }
}
function doubleClick(fcn) {
    if (singleClickTimeout != null) {
        clearTimeout(singleClickTimeout);
        singleClickTimeout = null;
    }
    fcn();
}

HTML defines onClick and onDblClick event handlers on all elements. However, if you want to enable both on the same element, something goes wrong. the onClick event gets fired twice! And that is not what we want, so here’s a little Javascript to fix that:

// use these functions to enable *both* onclick and 
// ondblclick on one element:
// usage: onclick="singleClick(someFunction)" 
//        ondblclick="doubleClick(otherFunction)"

singleClickTimeout = null;
function singleClick(fcn) {
    if (singleClickTimeout == null) {
        singleClickTimeout = setTimeout(function() {
            singleClickTimeout = null;
            fcn();
        }, 500);
    }
}
function doubleClick(fcn) {
    if (singleClickTimeout != null) {
        clearTimeout(singleClickTimeout);
        singleClickTimeout = null;
    }
    fcn();
}