Detecting a double-click on a Youtube URL with Javascript

Question

I want to be able to detect a double click on a <a> tag and then if it matches a particular regex pattern, run a function. In this case I will be checking if the link being clicked on is a valid link to a Youtube video.

I'm wondering what the best way to detect a double-click with Javascript is, other than changing all of the link markup to:

<a href="http://youtube.com/whatever" ondblclick="checkIfYoutubeLink();">link</a>

Something simular to:

$(a).dblclick(function() {

but without using jQuery or any Javascript library.

Thanks.

Answer 1

I'd suggest you to not use doubleclick events on any elements which do an action on singleclick; i.e. links, buttons, etc. A doubleclick event consists of two clicks, so any onclick handlers - and also the default action (loading the link's href) - will be executed.

While you can circumvent that using hacks like starting a ~50ms timer which triggers the single-click action in the onclick event and cancelling it in the ondblclick event it'll have a drawback: the regular click is delayed and depending on the user's doubleclick speed it might trigger a singleclick even though the user performed a slow doubleclick.

Answer 2

You want:

$('a[^=http://youtube.com]').dblclick(function(e){
    e.preventDefault();
    // Insert video iframe, or whatever you intend to do.
});

You don't want to use just plain JavaScript here, or you'll run into cross browser issues, etc. If you want to do the check manually, rather than trusting jQuery's regex, use:

$('a').dblclick(function(e){
    var pattern = /^http\:\/\/www\.youtube\.com/;
    if(pattern.test($(this).attr('href')))  // Does the href start with http://www.youtube.com/
    {
        e.preventDefault();
        // Insert video iframe, or whatever you intend to do.
    }
});

If you truly insist on not using jQuery, try this:

function dblclick_handler(el)
{
    var pattern = /^http\:\/\/www\.youtube\.com/;
    if(pattern.test(el.href))  // Does the href start with http://www.youtube.com/
    {
        // Insert video iframe, or whatever you intend to do.
        return false;
    }
    return true;
}

Then:

<a href="http://www.youtube.com/test/" ondblclick="dblclick_handler(this);">Click me!</a>

Note, you should use onclick here anyways.

Answer 3

Does this question help?

UPDATE

HTML

<div ondblclick="alertDouble()" >Doubleclick me</div>

JS

function alertDouble () {
    alert('Double')
}

But since <a> fires an event anyway off of one click, why not override that one only? You'll run into trouble trying to grab the double.

Answer 4

Select your element first, for example if your element has the id 'desiredElement', do the following:

document.getElementById('desiredElement').ondblclick = function() {
    alert('action');
};

You can, of course, use other techniques to select the desired element.

Answer 5

try this:

var a = document.getElementsByTagName('a'),
    total = a.length - 1,
    i;

for ( i = 0; i <= total; i++) {

   a[i].onclick = checkLink;

}


function checkLink(e) {

    e.preventDefault();

    var href = e.currentTarget.href;

    if ( href.match(/^http:\/\/youtube\.com/)) {

        //if this validate

    } else {

        window.location = href;

    }
}