0

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

我想知道使用 Javascript 检测双击的最佳方法是什么,而不是将所有链接标记更改为:

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

类似于:

$(a).dblclick(function() {

但不使用 jQuery 或任何 Javascript 库。

谢谢。

4

5 回答 5

3

我建议您不要在任何对单击执行操作的元素上使用双击事件;即链接、按钮等。双击事件由两次单击组成,因此任何 onclick 处理程序 - 以及默认操作(加载链接的 href) - 都将被执行。

虽然您可以使用诸如启动约 50 毫秒计时器之类的技巧来规避这种情况,该计时器会在 onclick 事件中触发单击操作并在 ondblclick 事件中取消它,但它会有一个缺点:常规单击会延迟并且取决于用户的双击速度即使用户执行缓慢的双击,它也可能触发单击。

于 2010-11-22T02:53:38.807 回答
1

你要:

$('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无论如何你都应该在这里使用。

于 2010-11-22T02:52:49.587 回答
0

这个问题有帮助吗?

更新

HTML

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

JS

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

但是既然<a>一键触发了一个事件,为什么不只覆盖那个事件呢?你会遇到麻烦,试图抓住双打。

于 2010-11-22T02:49:40.303 回答
0

尝试这个:

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;

    }
}
于 2010-11-22T03:25:03.560 回答
0

首先选择您的元素,例如,如果您的元素具有 id 'desiredElement',请执行以下操作:

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

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

于 2010-11-22T03:00:06.483 回答