Detecting A Double-click On A Youtube Url With Javascript

I want to be able to detect a double click on 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 c

Solution 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.

Solution 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:

functiondblclick_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.returnfalse;
    }
    returntrue;
}

Then:

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

Note, you should use onclick here anyways.

Solution 3:

Does this question help?

UPDATE

HTML

<divondblclick="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.

Solution 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.

Solution 5:

try this:

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

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

   a[i].onclick = checkLink;

}


functioncheckLink(e) {

    e.preventDefault();

    var href = e.currentTarget.href;

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

        //if this validate

    } else {

        window.location = href;

    }
}