web-dev-qa-db-ja.com

jQueryを使用してモバイルデバイスでロングタップイベントとダブルタップイベントを処理する最良の方法は何ですか？

JQueryのlive（）、bind（）、trigger（）で使用する「doubletap」イベントと「longtap」イベントの両方を追加するための最良の解決策を探しています。独自のクイックソリューションを導入しましたが、少しバグがあります。誰かが推奨するプラグイン、または共有したい独自のプラグインを持っていますか？

javascriptjqueryiphoneeventsmobile
29
Luke Dennis

バグとしてjQueryに報告されていますが、ダブルタップはダブルクリックと同じではないため、優先度は高くありません。ただし、首謀者のラウル・サンチェスは、おそらく使用できるdoubletapのjqueryソリューションをコーディングしました。 リンクはこちら 、モバイルSafariで動作します。

使い方は簡単です：

$('selector').doubletap(function() {});

-編集-

そして、longtapプラグインがあります here ！ iPadまたはiPhoneでデモを見ることができます こちら 。

20
rsplak

rsplakの答えは良いです。私はそのリンクをチェックアウトしました、そしてそれはうまくいきます。

ただし、それはダブルタップjQuery関数のみを実装します

バインド/デリゲートできるカスタムダブルタップeventが必要でした。つまり.

$('.myelement').bind('doubletap', function(event){
    //...
});

多くのイベントバインディングが行われているbackbone.jsスタイルのアプリを作成している場合、これはより重要です。

そこで、ラウル・サンチェスの作品を取り上げ、それを「jQuery特別イベント」に変えました。

ここを見てください： https://Gist.github.com/1652946 誰かに役立つかもしれません。

11
asgeo1

イベントの委任もサポートする jQuery Finger を使用することもできます。

longtapの場合：

// direct event
$('selector').on('press', function() { /* handle event */ });

// delegated event
$('ancestor').on('press', 'selector', function() { /* handle event */ });

ダブルタップの場合：

// direct event
$('selector').on('doubletap', function() { /* handle event */ });

// delegated event
$('ancestor').on('doubletap', 'selector', function() { /* handle event */ });
6
ngryman

Hammer.jsのようなマルチタッチJavaScriptライブラリ を使用するだけです。次に、次のようなコードを記述できます。

canvas
    .hammer({prevent_default: true})
    .bind('doubletap', function(e) { // Also fires on double click
        // Generate a pony
    })
    .bind('hold', function(e) {
        // Generate a Unicorn
    });

タップ、ダブルタップ、スワイプ、ホールド、変形（ピンチ）、ドラッグをサポートしています。タッチイベントは、同等のマウスアクションが発生したときにも発生するため、2組のイベントハンドラーを記述する必要はありません。ああ、そして私がしたようにjQueryishの方法で書けるようにしたいなら、jQueryプラグインが必要です。

この質問 にも非常によく似た回答を書きました。これも非常に人気があるため、あまりよく回答されていないためです。

6
David Johnstone

以下に、ロングタップ用に拡張できる関数のかなり基本的な概要を示します。

$('#myDiv').mousedown(function() {
    var d = new Date;
    a = d.getTime();
});

$('#myDiv').mouseup(function() {
    var d = new Date;
    b = d.getTime();

    if (b-a > 500) {
        alert('This has been a longtouch!');
    }
});

時間の長さは、mouseup関数のifブロックで定義できます。これは多分かなり強化されるでしょう。私は jsFiddle で遊んでみたい人のためにセットアップしました。

編集：私はこれがmousedownとmouseupが指のタッチで発射されることに依存していることに気づきました。そうでない場合は、適切な方法であれば何でも代用してください...モバイル開発にはあまり慣れていません。

2
eykanal

私がダブルタップイベントを書いた最新のjqueryドキュメントに基づいています

https://Gist.github.com/attenzione/7098476

0
Attenzione
 function itemTapEvent(event) {
    if (event.type == 'touchend') {
        var lastTouch = $(this).data('lastTouch') || {lastTime: 0},
            now       = event.timeStamp,
            delta     = now - lastTouch.lastTime;

            if ( delta > 20 && delta < 250 ) {
                if (lastTouch.timerEv)
                  clearTimeout(lastTouch.timerEv);
                return;
            } else
                $(this).data('lastTouch', {lastTime: now});

            $(this).data('lastTouch')['timerEv'] = setTimeout(function() {
                $(this).trigger('touchend');
            }, 250);
    }
    }

    $('selector').bind('touchend', itemTapEvent);
0
tdjprog