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. Link to comment https://forums.phpfreaks.com/topic/101017-how-to-distinguish-between-mouse-click-and-dbl-click/ 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> Link to comment https://forums.phpfreaks.com/topic/101017-how-to-distinguish-between-mouse-click-and-dbl-click/#findComment-516901 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 Link to comment https://forums.phpfreaks.com/topic/101017-how-to-distinguish-between-mouse-click-and-dbl-click/#findComment-516989 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)? Link to comment https://forums.phpfreaks.com/topic/101017-how-to-distinguish-between-mouse-click-and-dbl-click/#findComment-516996 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? Link to comment https://forums.phpfreaks.com/topic/101017-how-to-distinguish-between-mouse-click-and-dbl-click/#findComment-517013 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> Link to comment https://forums.phpfreaks.com/topic/101017-how-to-distinguish-between-mouse-click-and-dbl-click/#findComment-517061 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.