Hello Every One, I want to support different behaviour when single click on DIV and double click on DIV. IE is able to work fine and in firefox, when Dbl Click is done, browser is generating 2 single clk and 1 dlbclk events. How to differentiate in single clk about whether it is due to double clk or single clk. Please suggest on how to handle this.
use setTimeout: var clicks = 0; (element).onclick = function() { if(clicks==0) setTimeOut("checkClicks()", 250); clicks++; } function checkClicks() { if(clicks==1) { doSingleClick(); } else { doDoubleClick; } clicks = 0; } Code (markup): or something like that...
You may want to play around with timer interval to get it right, i just had a guess with 250 and it may be way off.
Hi Jhonson, Thanks for the reply. You have used timeout of 250ms, but user can change the time interval for double click from control panel. If user make more delay for double click then the logic will fail. How to avoid this situation. Problem is only in Firefox, IE has handled single and double click correctly
Hi Jhonson, Thanks for the reply. You have used timeout of 250ms, but user can change the time interval for double click from control panel. If user make more delay for double click then the timeout logix will fail. How to avoid this situation. Problem is only in Firefox, IE has handled single and double click correctly
venkata: that's not true. the following code works in FF 3.5 and IE7: <html> <body> <div id="out">double click me!</div> <script> document.getElementById("out").ondblclick = function() { alert("hello"); }; </script> </body> </html> PHP: http://fragged.org/dev/dblclick.php - above in action to test. it seems 'dblclick' is a native OS event. are you - per chance - bulgarian?
Hi christoff, Thanks for the response. See the below sample . Here on dbl click both single click and double clients events are generated. How to know whether it is because of single click or dbl click . By the way i am indian <html><body><div id="out">double click me!</div><script>document.getElementById("out").ondblclick = function() { alert("dbl hello");};document.getElementById("out").onclick = function() { alert("single hello");};</script></body></html>
yeah, this is bad UI imo. a framework can handle surplus clicks but anyway you do a click, following by another click that fires the click event twice. and the double click event once. the code below will run on firefox / firebug (need console to see the events raised themselves) <html> <body> <div id="out">double click me!</div> <script> var checker; document.getElementById("out").onclick = function(e) { checker = setTimeout((function() { handleSingle(e); }), 1000); }; document.getElementById("out").ondblclick = function(e) { if (checker) clearTimeout(checker); // stop single event propagation console.log("hello double", e); }; var handleSingle = function(e) { console.log("hello single", e); }; </script> </body> </html> PHP: i tried to kill the event on a timer and this works... except for it kills the first click only. this code will result in 2 events fired (of 3): dblclick click so it is the 2-nd click that needs to go away. as pointed by you, double click speed is a setting in control panel that cannot be accessed by js. hence you need to rely on timers. this means having to use a global variable when a double click is first intercepted that affects what happens on the single click: <html> <body> <div id="out">double click me!</div> <script> var checker, ongoingDouble = false; document.getElementById("out").onclick = function(e) { checker = setTimeout((function() { handleSingle(e); }), 300); }; document.getElementById("out").ondblclick = function(e) { if (checker) clearTimeout(checker); // stop single event propagation console.log("hello double", e); ongoingDouble = true; // this will halt any single click events... setTimeout((function() { ongoingDouble = false; }), 300); // for the next 300ms }; var handleSingle = function(e) { if (ongoingDouble) return; console.log("hello single", e); }; </script> </body> </html> PHP: i hope this helps. frameworks may help also http://stackoverflow.com/questions/...-to-handle-timer-in-click-dblclick-separation (not the best but) in mootools event propagation for clickafter doubleclick is stopped (i believe)
I guess if you really wanted to, you could use about an extra second or two to simulate clicks at different intervals (say increments of 100ms) and see when the double click event stops firing. But that would be a waste of time. Just set it to something reasonable and if the user doesn't double click within that time period they will soon learn how to.
if you're still having trouble try using jquery.. it has a built-in functions to handle click and has another function called "bind" that can work across several browsers seamlessly
er. what has jquery or binding got to do with double clicking? isn't bind just a way of assigning scope or functions to something? for example: $(document).ready(function() { $('#toggleAdvanced').bind("click dblclick", function(e) { console.log(e.type); // click / dblclick. }); }); // domready PHP: you still get: 1 click 2 click 3 dblclick please... jquery is not the answer to life, the universe and everything. 42 is. also, i stand corrected. mootools also does not stop event bubbling on a double click and the same results as jquery are exhibited. both frameworks can also do .preventDefault() or actions to that effect, waiting for a double click and continuing, but it is not out-of-the-box.