{"id":1114,"date":"2010-10-08T17:15:35","date_gmt":"2010-10-08T16:15:35","guid":{"rendered":"http:\/\/www.simonbattersby.com\/blog\/?p=1114"},"modified":"2010-11-14T10:44:16","modified_gmt":"2010-11-14T09:44:16","slug":"preventing-doubleclick-firing-two-clicks-with-jquery","status":"publish","type":"post","link":"https:\/\/www.simonbattersby.com\/blog\/2010\/10\/preventing-doubleclick-firing-two-clicks-with-jquery\/","title":{"rendered":"Preventing doubleclick firing two clicks with jQuery"},"content":{"rendered":"<p>A user of <a href=\"http:\/\/www.angelabarrow.co.uk\/workshops.php\" title=\"Workshop page with jQuery show\/hide\">my wife&#8217;s workshop page<\/a> reported that they couldn&#8217;t click to expand a div &#8211; when they did it opened and then immediately closed again. Experimentation showed that in fact they were double clicking rather than single clicking &#8211; registering two click events in fact. My original code was:<\/p>\r\n\r\n<pre>\r\n$('h3 span a').click(function() {\r\n    $(this).parent().parent().siblings(\".event_hidden\").slideToggle();\r\n    return false;\r\n});<\/pre>\r\n\r\n<p>When I started thinking about it, I couldn&#8217;t immediately see how to separate the two events &#8211; after all, a doubleclick is just two clicks, isn&#8217;t it? Fortunately jQuery provides an easy solution by using the event properties:<\/p>\r\n\r\n<pre>\r\n$('h3 span a').click(function(event) {\r\n    if(event.detail==1){<span class=\"code_comment\">\/\/activate on first click only to avoid hiding again on double clicks\r\n<\/span>        $(this).parent().parent().siblings(\".event_hidden\").slideToggle();\r\n    }\r\n    return false;\r\n});<\/pre>\r\n\r\n<p><strong>Edit 14 November 2010<\/strong> Actually, problem not quite solved, since I found that IE8 and under (I don&#8217;t know about IE9) don&#8217;t recognise <code>event.detail<\/code>, and hence the code above prevents the slideToggle working entirely. Fortunately, neither does the doubleclick problem seem to affect these browsers, and hence I amended my code to:<\/p>\r\n\r\n<pre>\r\n$('h3 span a').click(function(event) {\r\n    if(<span class=\"code_highlight\">!event.detail ||<\/span> event.detail==1){<span class=\"code_comment\">\/\/activate on first click only to avoid hiding again on double clicks\r\n<\/span>        $(this).parent().parent().siblings(\".event_hidden\").slideToggle();\r\n    }\r\n    return false;\r\n});<\/pre>","protected":false},"excerpt":{"rendered":"<p>A user of my wife&#8217;s workshop page reported that they couldn&#8217;t click to expand a div &#8211; when they did it opened and then immediately closed again. Experimentation showed that in fact they were double clicking rather than single clicking &#8211; registering two click events in fact. My original code was: $(&#8216;h3 span a&#8217;).click(function() { [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[20],"class_list":["post-1114","post","type-post","status-publish","format-standard","hentry","category-web-design-and-build","tag-jquery"],"_links":{"self":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/posts\/1114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/comments?post=1114"}],"version-history":[{"count":0,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/posts\/1114\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/media?parent=1114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/categories?post=1114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/tags?post=1114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}