クリックイベントと同様に、「touchstart」イベントのe.PageX位置に相当するものはありますか?


104

ライブ機能で使用されるtouchstartイベントのjQueryでX位置を取得しようとしていますか?

すなわち

$('#box').live('touchstart', function(e) { var xPos = e.PageX; } );

現在、これは「クリック」をイベントとして機能します。どうすれば(アルファ jQuery Mobile を使用せずに)タッチイベントで取得できますか?

何か案は?

助けてくれてありがとう。


私はこの上で助けを必要としている人のためにこれを見つけた: - stackoverflow.com/questions/3183872/...それはまたtouchstart上で動作します。
ワックスの

回答:


180

ちょっと遅れましたが、jQueryがマッサージしたイベントではなく、元のイベントにアクセスする必要があります。また、これらはマルチタッチイベントであるため、他の変更を行う必要があります。

$('#box').live('touchstart', function(e) {
  var xPos = e.originalEvent.touches[0].pageX;
});

他の指が必要な場合は、タッチリストの他のインデックスで見つけることができます。

新しいJQUERYの更新:

$(document).on('touchstart', '#box', function(e) {
  var xPos = e.originalEvent.touches[0].pageX;
});

最後に括弧が不足しています。次のようにしてください:})
SteveLacy

その通りその通り。2年間、誰も気づいていないことに驚きました。=)ありがとう!
mkoistinen 2013

残念ながら私にはうまくいきませんでしたtouchmove。最初にxとyを取得する必要がありました。
andrewb 2014年

@andrewb、イベントハンドラーを追加e.preventDefault()touchstartます。
matewka 14

ありがとう。e.touches[0].pageX;私のためによく働きました
Jayant Varshney

43

この単純な関数をJQueryベースのプロジェクトに使用します

    var pointerEventToXY = function(e){
      var out = {x:0, y:0};
      if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){
        var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
        out.x = touch.pageX;
        out.y = touch.pageY;
      } else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') {
        out.x = e.pageX;
        out.y = e.pageY;
      }
      return out;
    };

例:

$('a').on('mousedown touchstart', function(e){
  console.log(pointerEventToXY(e)); // will return obj ..kind of {x:20,y:40}
})

これがあなたにとって役に立つことを願っています;)


13
e.pageXはタッチイベントに対して定義されていないため、イベントタイプを確認する必要はありません。ただやるout.x = e.pageX || e.originalEvent.touches[0].pageX;
グリフィン14

1
戻る前に、このパーツを追加して、親要素に基づくパーセンテージの位置を取得します。これは、誰かを助ける場合に備えて... var offsetParent = e.target.offsetParent; var parentLeft = e.target.offsetParent.offsetLeft; out.percentX =(out.x-offsetParent.offsetLeft)/ offsetParent.offsetWidth; out.percentY =(out.y-offsetParent.offsetTop)/ offsetParent.offsetHeight; 戻る;
sradforth 2015

if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){-> if (e.type.startsWith("touch"))
gil9red

@Griffin-あなたの提案の問題は、デスクトップでは、マウスがドキュメントの左端にある場合、ステートメントの最初の分岐が0を生成し、それがfalseと解釈され、次にタッチするとブラウザーエラーが発生することです2番目のブランチでは未定義です。同意する?
MSC、

13

ここで他の回答をいくつか試しましたが、originalEventも定義されていませんでした。検査の結果、TouchListクラスのプロパティ(別の投稿者の提案による)を見つけ、この方法でpageX / Yに到達しました。

var x = e.changedTouches[0].pageX;

4
これは、すべてのJavaScriptベースのコードで正常に機能します。ネジjquery
Martian2049

2
私の救い主!touchmove()でも完全に機能します。
Tibix 2018

7

jQueryを使用していない場合... などのオブジェクトをTouchList取得するには、イベントのいずれかにアクセスする必要がTouchありますpageX/Y clientX/Y

関連ドキュメントへのリンクは次のとおりです。

e.targetTouches[0].pageX私の場合は使用しています。


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.