clearTimeout does not work in ondblclick event in FireFox

Question

I'm trying to have an element which support both click and double click on it. But the following example works in IE but does not work in FireFox 3.5.6:

<button onclick="c=setTimeout('alert(1);',1000);" ondblclick="clearTimeout(c);alert(2);">Test</button>

It just doesn't clear timeout, so alert(1) is being fired. Does anyone know what is the issue? How I can have click and double click events separately in FireFox?

Answer 1

You really shouldn't be inlining your javascript in your HTML. I would suggest using a JavaScript library like jQuery for this. jQuery will solve the cross browser event issues that you are having!

$(document).ready(function() {
    var c;
    $("button").click(function() {
        c = setTimeout(function() {
            alert(1);
        }, 1000);
    }).dblclick(function() {
        clearTimeout(c);
        alert(2);
    });
});

Answer 2

When you double-click in Firefox, you get two click events and then a dblclick event. So you're setting two timers and clearing one. Clearing the timer on the click event should work:

<button onclick="clearTimeout(c);c=setTimeout('alert(1);',1000);" ondblclick="clearTimeout(c);alert(2);">Test</button>

Answer 3

I don't get it. It still doesn't work. I mean, if you put a clerTimeout in the onclick event the onclick event wont work since you stop it before you have finished it :S Actually I don't see how you could say "This fixed the issue" ?? Just try and copy that very code you wrote and you'll realise that nothing happends... :/