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.

You can do that with JavaScript: http://www.quirksmode.org/js/introevents.html But if it is not for a very special case I would not advice to do so. Users are not used to double click on a link. Always follow the principle of the least surprise. — Felix Kling, Dec 30 '10 at 10:58
Just curious, what's the use-case? Behaving *unlike* the other 99.99% of the web generally isn't a good idea. — Nick Craver, Dec 30 '10 at 11:00
I am calling a zend frame work action like this. . I just want to call it when user double clicks on link. — Muhammad Zeeshan, Dec 30 '10 at 11:14
Usecase: I am doing inline editing on table. When I click any data it should open a form in that . But client want to use double click to open form in that . data does not look like link but when I db click it, it should call an action. — Muhammad Zeeshan, Dec 30 '10 at 11:55

T.J. Crowder · Accepted Answer · 2021-03-03T15:19:54.570

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.

+1: this is the only answer that will properly work without JS. — nico, Dec 30 '10 at 11:17
Well according to OP, without JS it won't work properly, since he want's his god damned double click :) — Jan Hančič, Dec 30 '10 at 11:18
Usecase: I am doing inline editing on table. When I click any data it should open a form in that . But client want to use double click to open form in that . data does not look like link but when I db click it, it should call an action. — Muhammad Zeeshan, Dec 30 '10 at 11:57
@IvanaG.B. - It does with jQuery, because `return false` in a jQuery event handler means both `preventDefault` and `stopPropagation`. It doesn't in a native DOM handler because that isn't true in native DOM handlers. — T.J. Crowder, Mar 03 '21 at 15:16

score 6 · Answer 2 · answered Dec 30 '10 at 11:02

6

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>

answered Dec 30 '10 at 11:02

goenning

6,514
1
35
42

1

Although that it is true and may be better ways, my answer does what he want. Didn't understand the negative. – goenning Dec 30 '10 at 11:18
1

@Guilherme Oenning: There are much better ways of implementing what the OP wants: although he shouldn't in the first place implement a double click, if he wants to do that he should do it with an `` not a ``. – nico Dec 30 '10 at 11:22
2

But what he wants should not be called a `link`, it's more like a button, that's why I used the ``. – goenning Dec 30 '10 at 11:28
@Guilherme: *"But what he wants should not be called a `link`, it's more like a button..."* Fair point! I wouldn't make it look like one, then, but it's still a fair point. – T.J. Crowder Dec 30 '10 at 11:31
@Oenning: Then use ` – nico Dec 30 '10 at 12:18

score 1 · Answer 3 · answered Apr 28 '17 at 01:49

1

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>

answered Apr 28 '17 at 01:49

Chalky

1,624
18
20

Obviously, you need to take extra steps if you want to use the 'target' behaviour, but for simple stuff, mine works. – Chalky Apr 28 '17 at 01:51

score -1 · Answer 4 · answered Dec 30 '10 at 11:02

-1

You can do so using Javascript:

<a href="#" onclick="javascripot:void(0)" ondblclick="javascript:DoMyWorkFunction()">a:x</a>

answered Dec 30 '10 at 11:02

Bhaskar

10,537
6
53
64

You don't use `javascript:` in DOM0 (attribute) event handlers. Only `href` and the like. – T.J. Crowder Dec 30 '10 at 11:08
Why cant we use javascript: ? – Bhaskar Feb 11 '11 at 06:39

score -1 · Answer 5 · answered Dec 30 '10 at 11:05

-1

try this:

<a ondblclick= "openLink('your_link')">Link</a>

<script>
function openLink(link)
{
   location.href = link;
}
</script>

OR

<a ondblclick="location.href='your_link'">Double click on me</a>

answered Dec 30 '10 at 11:05

bharath

1,233
2
11
19

4

`a` elements without `name` or `href` attributes are invalid: http://validator.w3.org – T.J. Crowder Dec 30 '10 at 11:14

Make a link open on double click

5 Answers5

Linked

Related