Обнаружение двойного щелчка по URL-адресу Youtube с помощью Javascript - PullRequest
Новая
       26

Обнаружение двойного щелчка по URL-адресу Youtube с помощью Javascript

0 голосов
/ 22 ноября 2010

Я хочу иметь возможность обнаружить двойной щелчок на теге <a>, а затем, если он соответствует определенному шаблону регулярных выражений, запустить функцию. В этом случае я буду проверять, является ли ссылка, по которой вы щелкаете, действительной ссылкой на видео с YouTube.

Мне интересно, как лучше всего обнаружить двойной щелчок с помощью Javascript, кроме изменения всей разметки ссылок на: 

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

Что-то похожее на: 

$(a).dblclick(function() {

но без использования jQuery или какой-либо библиотеки Javascript.

Спасибо.

Ответы [ 5 ]

3 голосов
/ 22 ноября 2010

Я бы посоветовал вам не использовать события двойного клика для каких-либо элементов, которые выполняют действие для одиночного клика; то есть ссылки, кнопки и т. д. Событие doubleclick состоит из двух щелчков, поэтому любые обработчики onclick, а также действие по умолчанию (загрузка ссылки) будут выполнены.

Хотя вы можете обойти это, используя такие хаки, как запуск таймера ~ 50 мс, который запускает действие одним щелчком в событии onclick и отмену его в событии ondblclick, у него будет недостаток: обычный щелчок задерживается и зависит от Скорость двойного щелчка пользователя может вызвать одиночный щелчок, даже если пользователь дважды щелкнул мышью.

1 голос
/ 22 ноября 2010

Вы хотите: 

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

Вы не хотите использовать здесь простой JavaScript, иначе вы столкнетесь с кросс-браузерными проблемами и т. Д. Если вы хотите выполнить проверку вручную, а не доверять регулярному выражению jQuery, используйте: 

$('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.
    }
});

Если вы действительно настаиваете на том, чтобы не использовать jQuery, попробуйте следующее: 

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;
}

Тогда: 

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

Обратите внимание, вы должны использовать onclick здесь в любом случае.

0 голосов
/ 22 ноября 2010

попробуйте это: 

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;

    }
}
0 голосов
/ 22 ноября 2010

Сначала выберите свой элемент, например, если ваш элемент имеет идентификатор «требуемый элемент», выполните следующие действия: 

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

Конечно, вы можете использовать другие методы для выбора нужного элемента.

0 голосов
/ 22 ноября 2010

Помог ли этот вопрос помочь?

UPDATE

HTML 

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

JS 

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

Но поскольку <a> в любом случае запускает событие за один клик, почему бы не переопределить только это? Вы столкнетесь с проблемами, пытаясь схватить двойника.

...