Make a link open on double click

Question

How to make hyper link <a>Link</a> a double click link: i:e link should open on double click and single click should do nothing.

Answer 1

Okay, so, you can do this:

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;
    });
});

Live copy:

jQuery(function($) {
    $('#golink').click(function() {
        return false;
    }).dblclick(function() {
        window.location = this.href;
        return false;
    });
});

<a id='golink' href='http://stackoverflow.com' target="_blank">Go Somewhere</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

(It doesn't have to be an ID; you can do this with a class or anything else that lets you form a selector that jQuery can process to hook things up.)

If the user has JavaScript disabled, the link will work normally. Crawlers will find the link normally, etc. If a user has JavaScript enabled, the event handlers will get hooked up and it will require a double click.

The above blows away keyboard navigation, though, so then you have to handle that:

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;
        }
    });
});

Live copy:

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;
        }
    });
});

<a id='golink' href='http://stackoverflow.com' target="_blank">Go Somewhere</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I can't imagine this is good for accessibility, and I bet there are other things not catered for above. Which all feeds into:

But I'd strongly recommend against doing it without a really good use case.

Answer 2

Try using span instead of a link. Something like this:

<span ondblclick="window.location='http://www.google.com'" style="color:blue;text-decoration: underline;">Click Here</span>

Answer 3

Great question, I have been looking for an answer. I came up with this (tested in Chrome). Add these attributes to your link:

onclick="return false" ondblclick="location=this.href"

e.g.

<a onclick="return false" ondblclick="location=this.href" href="http://www.google.com">Google</a>