web-dev-qa-db-ja.com

タッチエンドがドラッグ後に来るかどうかを確認する

テーブルのクラスを変更するコードがあります。電話では、テーブルが画面に対して広すぎる場合があり、ユーザーはコンテンツを表示するためにドラッグ/スクロールします。ただし、テーブルをタッチしてドラッグすると、ドラッグするたびにタッチエンドがトリガーされます。

タッチドラッグの結果としてタッチエンドが発生したかどうかを確認するにはどうすればよいですか？ dragstartとdragendを追跡してみましたが、うまく機能せず、洗練されていないアプローチのようです。 「タッチエンドがドラッグの終わりに来たのか？」と本質的に判断できる以下に追加できるものはありますか？

$("#resultTable").on("touchend","#resultTable td",function(){ 
        $(this).toggleClass('stay');
});

よろしくお願いします。

PS-最新のjqueryを使用しており、通常のクリックは機能しますが、タッチエンドと比較すると非常に遅くなります。

javascriptjqueryiostouchtouch-event
37
Konrad Lawson

2つのリスナーを使用します。

まず、変数をfalseに設定します。

var dragging = false;

次に、ontouchmoveはドラッグをtrueに設定します

$("body").on("touchmove", function(){
      dragging = true;
});

次に、ドラッグが完了したら、ドラッグがtrueかどうかを確認し、trueの場合はドラッグタッチとしてカウントします。

$("body").on("touchend", function(){
      if (dragging)
          return;

      // wasn't a drag, just a tap
      // more code here
});

タッチエンドは引き続き起動しますが、タップスクリプトが実行される前に終了します。

次にタッチしたときに、まだドラッグ済みとして設定されていないことを確認するには、タッチダウン時にfalseにリセットします。

$("body").on("touchstart", function(){
    dragging = false;
});
63
lededje

私の問題に対する1つの解決策がここにあるようです：

http://alxgbsn.co.uk/2011/08/16/event-delegation-for-touch-events-in-javascript/

このコードのコードは、タッチスタート後の動きを検出し、先に進んだ後のタップ動作を中止します。

var tapArea, moved, startX, startY;

tapArea = document.querySelector('#list'); //element to delegate
moved = false; //flags if the finger has moved
startX = 0; //starting x coordinate
startY = 0; //starting y coordinate

//touchstart           
tapArea.ontouchstart = function(e) {

    moved = false;
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
};

//touchmove    
tapArea.ontouchmove = function(e) {

    //if finger moves more than 10px flag to cancel
    //code.google.com/mobile/articles/fast_buttons.html
    if (Math.abs(e.touches[0].clientX - startX) > 10 ||
        Math.abs(e.touches[0].clientY - startY) > 10) {
            moved = true;
    }
};

//touchend
tapArea.ontouchend = function(e) {

    e.preventDefault();

    //get element from touch point
    var element = e.changedTouches[0].target;

    //if the element is a text node, get its parent.
    if (element.nodeType === 3) { 
        element = element.parentNode;
    }

    if (!moved) {
        //check for the element type you want to capture
        if (element.tagName.toLowerCase() === 'label') {
            alert('tap');
        }
    }
};

//don't forget about touchcancel!
tapArea.ontouchcancel = function(e) {

    //reset variables
    moved = false;
    startX = 0;
    startY = 0;
};

詳細： https://developers.google.com/mobile/articles/fast_buttons

1
Konrad Lawson

ユーザーがドラッグして他のコンテンツを表示したり、要素を周囲にドラッグしたりしても、違いを見分けることはできないと思います。アプローチを変えるべきだと思います。あなたはそれがモバイルデバイスであるかどうかを検出し、要素の動きを有効/無効にするスイッチを描くことができます。

0
KoU_warch

@lededgeのソリューションを短縮するには、これが役立つ場合があります。

$("body").on("touchmove", function(){
   dragging = true;
}).on("touchend", function(){
   if (dragging)
      return;
}).on("touchstart", function(){
   dragging = false;
});
0
Jessiemar Pedrosa