praveenhotha Posted April 14, 2008 Share Posted April 14, 2008 How to distinguish between mouse click and dbl click on the same element? The click event fires before the dblclick event. How can I cancel the single click event. Thanks in advance. Quote Link to comment Share on other sites More sharing options...
Psycho Posted April 14, 2008 Share Posted April 14, 2008 Well, I'm don't know the "whole picture" here. Do you have an event you want fired on a single click? If not, then just don't do anything for single clicks. Ok, so let's assume the worst-case scenario - that you have one event you want fired on single click and a different event to be fired on a double click. If that is the case, one solution I can think of would be to delay the single click function to wait and see if the double click takes place. Here is a quick test that works. However, it interprets more than two repetitive clicks as a single click. I'm sure that the code could be modified as appropriate. But, this works for single and double clicks only. <html> <head> <script type="text/javascript"> var clickedTwice = false; function clickOnce(firstRun) { if (firstRun) { setTimeout('clickOnce(false)', 500); } else { if (!clickedTwice) { //Run the function normally document.getElementById('once').innerHTML = 'true'; document.getElementById('twice').innerHTML = 'false'; } else { //Element was clicked twice, do not runsingle click //Reset double click trigger clickedTwice = false; } } } function clickTwice() { clickedTwice = true; document.getElementById('twice').innerHTML = 'true'; document.getElementById('once').innerHTML = 'false'; } </script> </head> <body> <a href="#" onclick="clickOnce(true)"; onDblClick="clickTwice();">Click Me!</a><br><br> Clicked Once: <span id="once"></span><br> Clicked Twice: <span id="twice"></span><br> </body> </html> Quote Link to comment Share on other sites More sharing options...
emehrkay Posted April 14, 2008 Share Posted April 14, 2008 it is hard to do. You'll have to set a timer and log when the first click happens and then the second click logic: click -> start timer if(timer is over 200ms) fire single click event if(second click is within 200ms) fire double click event clear timer Quote Link to comment Share on other sites More sharing options...
Psycho Posted April 14, 2008 Share Posted April 14, 2008 it is hard to do. You'll have to set a timer and log when the first click happens and then the second click logic: click -> start timer if(timer is over 200ms) fire single click event if(second click is within 200ms) fire double click event clear timer Isn't that what I just demonstrated above (except that I used 500ms instead of 200ms)? Quote Link to comment Share on other sites More sharing options...
emehrkay Posted April 14, 2008 Share Posted April 14, 2008 it is hard to do. You'll have to set a timer and log when the first click happens and then the second click logic: click -> start timer if(timer is over 200ms) fire single click event if(second click is within 200ms) fire double click event clear timer Isn't that what I just demonstrated above (except that I used 500ms instead of 200ms)? Did you test the code that you wrote above? Quote Link to comment Share on other sites More sharing options...
Psycho Posted April 14, 2008 Share Posted April 14, 2008 Yes I did. It works fine in IE, but not in FF (after further review). It was intended as a POC, not a final product. The logic is sound (the same as you proposed), just a small issue in the way it was interpreted. Apparently FF interprests a double click as 1-double click and 2-single clicks, whereas IE only interprest the first click as a single click and the subsequent click as a double only. Here is a slight modification that works in both IE & FF. I'm sure it could still be improved. <script type="text/javascript"> var clickedTwice = false; function clickOnce(firstRun) { if (firstRun) { document.getElementById('twice').innerHTML = ''; document.getElementById('once').innerHTML = ''; setTimeout('clickOnce(false)', 200); } else { if (!clickedTwice) { //Run the function normally document.getElementById('once').innerHTML = 'true'; document.getElementById('twice').innerHTML = 'false'; } } } function clickTwice() { clickedTwice = true; document.getElementById('twice').innerHTML = 'true'; document.getElementById('once').innerHTML = 'false'; setTimeout('resetClcikTwice()', 500); } function resetClcikTwice() { clickedTwice = false; } </script> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.