42

タブレットのタッチリスナーを実装して、タッチが上向きか下向きかに応じていくつかのアクションをトリガーしようとしています。

ネイティブリスナーを試しました：

($document).bind('touchmove', function (e)
{
    alert("it worked but i don't know the direction");
});

しかし、私は方向を決定する方法がわかりません。

これは可能ですか？

または、タッチスタート/タッチエンドを使用する必要がありますか?これが必要な場合、タッチの動きが止まる前に方向を判断できますか?

外部ライブラリでしかこれを行うことができない場合、何が最適ですか?

ありがとう。

4

5 に答える 5

68

iPadでいくつかの問題が発生し、2つのイベントで解決しました

var ts;
$(document).bind('touchstart', function (e){
   ts = e.originalEvent.touches[0].clientY;
});

$(document).bind('touchend', function (e){
   var te = e.originalEvent.changedTouches[0].clientY;
   if(ts > te+5){
      slide_down();
   }else if(ts < te-5){
      slide_up();
   }
});
于 2014-03-07T18:22:33.650 に答える
45

タッチの最後の位置を保存してから、現在の位置と比較する必要があります。
大まかな例:

var lastY;
$(document).bind('touchmove', function (e){
     var currentY = e.originalEvent.touches[0].clientY;
     if(currentY > lastY){
         // moved down
     }else if(currentY < lastY){
         // moved up
     }
     lastY = currentY;
});
于 2012-11-07T21:06:05.760 に答える
22

アウレリアーノの答えは本当に正確なようですが、どういうわけかうまくいかなかったので、彼にクレジットを与えて、次のように答えを改善することにしました。

var ts;
$(document).bind('touchstart', function(e) {
    ts = e.originalEvent.touches[0].clientY;
});

$(document).bind('touchmove', function(e) {
    var te = e.originalEvent.changedTouches[0].clientY;
    if (ts > te) {
        console.log('down');
    } else {
        console.log('up');
    }
});

私は単に'touchend'イベントを変更しました'touchmove'

于 2014-03-10T01:27:34.230 に答える
3

ドキュメント内の要素が、本文を含む他の要素をスクロールせずにスクロールするようにするスクリプトを作成しました。これは、ブラウザーだけでなく、モバイル デバイス/タブレットでも機能します。

// desktop scroll
$( '.scrollable' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {
    var e0 = e.originalEvent,
    delta = e0.wheelDelta || -e0.detail;

    this.scrollTop += delta * -1;
    e.preventDefault();
});

var lastY;
var currentY;

// reset touch position on touchstart
$('.scrollable').bind('touchstart', function (e){
    var currentY = e.originalEvent.touches[0].clientY;
    lastY = currentY;
    e.preventDefault();
});

// get movement and scroll the same way
$('.scrollable').bind('touchmove', function (e){
    var currentY = e.originalEvent.touches[0].clientY;
    delta = currentY - lastY;

    this.scrollTop += delta * -1;
    lastY = currentY;
    e.preventDefault();
});
于 2015-09-17T07:19:48.120 に答える
2

この解決策は、現在の回答では考慮されていない方向の変化を考慮に入れています。以下のソリューションは、タッチ感度にも対応しています。これは、ユーザーが一方向に移動しているが、タッチ側でユーザーの指が別の方向にナッジして、実際の方向が台無しになっている場合です。

 var y = 0; //current y pos
 var sy = y; //previous y pos
 var error = 5; //touch sensitivity, I found between 4 and 7 to be good values. 

 function move(e) {
    //get current y pos
    y = e.pageY;

    //ingnore user jitter
    if (Math.abs(y - sy) > error) {
        //find direction of y
        if (y > sy) {
            //move down 
        } else {
            //move up
        }
        //store current y pos
        sy = y;
    }
}
于 2014-06-14T13:27:15.147 に答える