CODEWITHSUNDEEP
javascripthtml
MalphasWats
MalphasWats

Reputation: 3295

Make a link activate on doubleclick only

I'm building a very simple web-based file browser for my website.

I've styled my links to look like files and I want to be able to single-click to select them so I can do things like rename etc, and I want to be able to double-click to actually activate the link and download the file.

I've come up with the following, but it looks ugly. Does anyone have a more elegant solution?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<script type="text/javascript">

function nullClick()
{
    //do select stuff
    return false;
}

function dolink(link)
{
    window.location(link.href);
}

</script>

</head>

<body>

<a href="http://pathtofile" onclick="return nullClick();" ondblclick="dolink(this);">Clicky</a>

</body>
</html>

Upvotes: 1

Views: 4378

Answers (5)

Ben S
Ben S

Reputation: 69342

I would avoid doing this since it goes against how users expected web sited to function, but if you must, the way you do it is the only way I know of.

Also, you should know that the site will fall back to single-clickable links if javascript is disabled or unavailable.

Upvotes: 4

BalusC
BalusC

Reputation: 1108722

How about using jQuery?

HTML example:

<a href="javascript:alert('link1')" class="dblclick">link1</a><br>
<a href="javascript:alert('link2')" class="dblclick">link2</a><br>
<a href="javascript:alert('link3')" class="dblclick">link3</a><br>

jQuery example:

$('a.dblclick')
    .bind('click', function() { return false; })
    .bind('dblclick', function() { window.location = this.href; });

SSCCE:

<!doctype html>
<html lang="en">
    <head>
        <title>Test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(init);
            function init() {
                $('a.dblclick')
                    .bind('click', function() { return false; })
                    .bind('dblclick', function() { window.location = this.href; });
            }
        </script>
    </head>
    <body>
        <a href="javascript:alert('link1')" class="dblclick">link1</a><br>
        <a href="javascript:alert('link2')" class="dblclick">link2</a><br>
        <a href="javascript:alert('link3')" class="dblclick">link3</a><br>
    </body>
</html>

Upvotes: 1

Joel Martinez
Joel Martinez

Reputation: 47749

If you're not opposed to a little jQuery:

$("#yourLinkId").dblclick(function () { 
      window.location($(this).attr("href")); 
    });

Upvotes: 1

Bj&#246;rn
Bj&#246;rn

Reputation: 29381

If you're not using any JavaScript framework, that is probably as good as it gets. You could get rid of your functions thou;

<a href="..." onclick="return false;" ondblclick="location.href='...';">Foobar</a>

Upvotes: 1

Tarik
Tarik

Reputation: 81721

<a href="http://pathtofile" onclick="return false" ondblclick="window.location = 'some where'">Clicky</a>

I think it would be more elegant solution with one line of code.

Upvotes: 3

Related Questions