Question

I want to do this: when you click a link on a page, it will open the link normally, but when you double click the link, it will alert the link’s ‘href’ attribute.

However, when I try to double click a link, it will always open the link. Any idea?

Answer 1

The link opens after the first click of a double click, so you will need to add a time delay to determine which is which. Here’s some code (using the jQuery JavaScript library for brevity) that works on all the browsers except Internet Explorer (try it out). If you can figure out why it doesn’t, I’d like to know.

$('a').click(function(event) {
    var elem = $(this),
        clickTimeout = elem.data('clickTimeout');

    if(clickTimeout) {        
        // Double click; cancel the single click timeout
        clearTimeout(clickTimeout);
        elem.data('clickTimeout', null);

        alert(elem.attr('href'));

    } else {
        // Might be a single click; wait and see
        elem.data('clickTimeout', setTimeout(function() {
            // Single click; timeout was not cancelled
            elem.data('clickTimeout', null);

            // Navigate to the link's URL
            window.location.href = elem.attr('href');

        }, 500));
    }

    // Stops propagation and prevents default action
    return false;
});