Question

我希望能够检测到<a>标记的双击，然后如果它与特定的正则表达式模式匹配，则运行一个函数。在这种情况下，我将检查被点击的链接是否是Youtube视频的有效链接。

我想知道用Javascript检测双击的最佳方法是什么，除了将所有链接标记更改为：

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

类似于：

$(a).dblclick(function() {

但不使用jQuery或任何Javascript库。

感谢。

Answer 1

我建议你不要对任何对singleclick采取行动的元素使用双击事件;即链接，按钮等 doubleclick事件包含两次点击，因此任何onclick处理程序 - 以及默认操作（加载链接的href） - 都将被执行。

虽然你可以绕过使用黑客攻击，例如启动〜50ms计时器触发onclick事件中的单击操作并在ondblclick事件中取消它，但它有一个缺点：常规点击被延迟并取决于即使用户执行了慢速双击，用户的双击速度也可能触发单击。

Answer 2

你想：

$('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。

Answer 3

this question有帮助吗？

<强>更新

HTML

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

JS

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

但是，由于<a>无论如何都会在一次点击时触发一个事件，为什么不再覆盖那一个？你试图抓住双倍的东西会遇到麻烦。

Answer 4

首先选择您的元素，例如，如果您的元素的ID为'desiredElement'，请执行以下操作：

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

当然，您可以使用其他技术来选择所需的元素。

Answer 5

试试这个：

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;

    }
}

使用Javascript检测双击Youtube URL

5 个答案: