Element with onClick and onDblClick

Question

I have a list and on that list I’m trying to distinguish one click of a double click

I initially used in the HTML:

<a class = "alinhar1" href="#" ondblclick="list.oneDblClick();"  onClick="list.oneClick();">

But every time I make one double click, the click is also called.

I’ve tried using a flag to try to block access to click, but without success.

I’ve also thought about just using the onClick and then within the method check if there was another next click, but also unsuccessful

Is there any solution or alternative to help me overcome this dichotomy?

Answer 1

You can use the type from the event to separate them, and call an intermediate function that routing to the one you want.

Sort of like this:

<a class = "alinhar1" href="#" ondblclick="clickHandler(event)"  onClick="clickHandler(event)">'

and then the function:

function clickHandler(e){
    if (e.type == 'dblclick') list.oneDblClick(e);
    else if (e.type == 'click') list.oneClick(e);
}

I’m not quite sure that browsers support the dblclick but the modern bear all I judge.

Edit:

I just noticed that both events are fired in Chrome. Here’s a solution to this that waits half a second to make sure which event it is:

var list = {
    oneClick: function (e) {
        alert('um clique do tipo: ' + e.type);
    },
    oneDblClick: function (e) {
        alert('dois clique do tipo: ' + e.type);
    },
    timeout: null
};

function clickHandler(e) {
    (function () {
        var type = e.type;
        var evt = e;
        var verificador = function () {
            list.timeout = null;
            if (type == 'dblclick') list.oneDblClick(evt);
            else if (type == 'click') list.oneClick(evt);
        }
        if (list.timeout) clearTimeout(list.timeout)
        list.timeout = setTimeout(verificador, 500);
    })();
}

jsFiddle: http://jsfiddle.net/9rLb8wsy/