How to trigger a link (a tag) with double click instead of single click?

Question

Is there any way that I can keep all the hover effects but trigger the tag link (to another page) only when double clicking? Thanks!

Any pure javascript answer? (no jQuery)

Heard of ondblclick() ? Easy: http://www.w3schools.com/jsref/event_ondblclick.asp — Ritesh A, Oct 20 '13 at 16:40
ahh!! thanks guys! I googled so much but i guess i had totally wrong keywords — user2206436, Oct 20 '13 at 16:45
weird ondbclick wont work in my case, the tab still jump out. i have to use scripts. return false on single click won't work either :( however, @Amine Hajyoussef 's answer works just fine for me using pure js — user2206436, Oct 20 '13 at 17:17

score 4 · Answer 1 · edited May 23 '17 at 12:08

4

I would of course won't go against one click standard, but if that's what you wish:

You can find an answer to that here

Copying from the answer above:

HTML:

<a id='golink' href='gosomewhere.html'>Go Somewhere</a>

JavaScript using jQuery:

jQuery(function($) {
     $('#golink').click(function() {
         return false;
     }).dblclick(function() {
         window.location = this.href;
         return false;
     }).keydown(function(event) {
         switch (event.which) {
             case 13: // Enter
             case 32: // Space
                 window.location = this.href;
                 return false;
         }
     });
 });

edited May 23 '17 at 12:08

Community

1
1

answered Oct 20 '13 at 16:45

Leon

867
7
13

Thanks! this is helpful! Coz i wanna preserve single click to navigate the page. and the link isn't the main point of the site i am making. – user2206436 Oct 20 '13 at 16:55
Any javascript version of this? I was hoping not to use jQuery, but somehow I don't know how to combine those click, dbclick functions – user2206436 Oct 20 '13 at 16:57
You have @amine's answer below, for the non-jQuery version – Leon Oct 20 '13 at 17:03

Amine Hajyoussef · Accepted Answer · 2013-10-20T17:02:35.440

3

I came with this (without jQuery, using only an onclick event handler):

  var clicked=false;
  var el = document.getElementById('link');
  var maxClicksDelay = 500; // in milliseconds 
  el.onclick = function(e) {
    if(!clicked) {
    clicked = true;
    setTimeout(function() { clicked = false}, maxClicksDelay );  
    e.preventDefault();
    }

  }

jsfiddle

edited Oct 20 '13 at 17:02

answered Oct 20 '13 at 16:49

Amine Hajyoussef

4,381
3
22
26

While this might work, it is not an optimal solution, because of the “magic number” `500` in the `setTimeout` here – the user can customize in their system, from which time span apart two clicks count as a double click, and this solution does not take that into account … – CBroe Oct 20 '13 at 16:59
Maybe I'm pessimist, but why not use `ondblclick` ? – Andreas Louv Oct 20 '13 at 17:04
@NULL somehow ondbclick wont work for me...i tried many times :( I have to use script to do it – user2206436 Oct 20 '13 at 17:14
@user2206436 please check, that you correctly typed `ondblclick`. – Warlock Oct 20 '13 at 17:23

Warlock · Answer 3 · 2013-10-20T17:13:12.170

I would suggest to add an attribute to handle links with a double click option.

<a href='http://...' dblclick>Link</a>
                     ^^^^^^^^

At the end of your html document add this lines to find anchors with a specific 'dblclick' attribute:

<script type='text/javascript'>
  $(function(){
    $('a[dblclick]').click(function(e){
       return false; // disable single click
    }).dblclick(function(e){
       window.location = this.href; // on double click go to the URL from href value
    })
  })
</script>

How to trigger a link (a tag) with double click instead of single click?

3 Answers3

Linked