Prevent click event from firing when dblclick event fires

Question

I\'m handling both the click and dblclick event on a DOM element. Each one carries out a different command, but I find that when double clicking on the element, in addition

Answer 1

Thanks to all the other answers here as the combination of them seems to provide a reasonable solution for me when the interaction requires both, but mutually exclusive:

var pendingClick = 0;

function xorClick(e) {
    // kill any pending single clicks
    if (pendingClick) {
        clearTimeout(pendingClick);
        pendingClick = 0;
    }

    switch (e.detail) {
        case 1:
            pendingClick = setTimeout(function() {
                console.log('single click action here');
            }, 500);// should match OS multi-click speed
            break;
        case 2:
            console.log('double click action here');
            break;
        default:
            console.log('higher multi-click actions can be added as needed');
            break;
    }
}

myElem.addEventListener('click', xorClick, false);

Update: I added a generalized version of this approach along with a click polyfill for touch devices to this Github repo with examples:

https://github.com/mckamey/doubleTap.js