0

<a>タグのダブルクリックを検出し、特定の正規表現パターンと一致する場合は関数を実行できるようにしたいと考えています。この場合、クリックされたリンクが Youtube ビデオへの有効なリンクかどうかを確認します。

すべてのリンクマークアップを次のように変更する以外に、Javascript でダブルクリックを検出する最良の方法は何だろうと思っています。

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

似たようなもの：

$(a).dblclick(function() {

ただし、jQuery や Javascript ライブラリは使用しません。

ありがとう。

4

5 に答える 5

3

シングルクリックでアクションを実行する要素でダブルクリックイベントを使用しないことをお勧めします。つまり、リンク、ボタンなどです。ダブルクリックイベントは2回のクリックで構成されているため、onclickハンドラー（およびデフォルトのアクション（リンクのhrefのロード））が実行されます。

onclickイベントでシングルクリックアクションをトリガーする約50msのタイマーを開始し、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

最初に要素を選択します。たとえば、要素の ID が「desiredElement」の場合は、次の手順を実行します。

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

もちろん、他の手法を使用して目的の要素を選択することもできます。

于 2010-11-22T03:00:06.483 に答える
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 に答える