web-dev-qa-db-ja.com

タッチエンド座標をキャプチャする方法は？

touchendイベントのタッチ座標をキャプチャしようとしていますが、未定義になります。 touchstartイベントは適切に機能しますが、touchendでは同じ概念が失敗します。私はmousedownとmouseupを使用してこのコードをビルドし、thatはうまく機能します。

何が欠けていますか？

div.addEvent("touchstart", function (event) {
    event.preventDefault(); // to avoid scrolling
    span.innerHTML = event.page.x;
});
div.addEvent("touchend", function (event) {
    span.innerHTML = event.page.x;
});

[〜＃〜] fiddle [〜＃〜]

javascripttouchmootools
31
Rikard

値をtouchmoveに保存し、touchendで読み取る必要があります。

var lastMove = null;

// Save the touchstart to always have a position
div.addEvent('touchstart', function(event) {
  lastMove = event;
});

// Override with touchmove, which is triggered only on move
div.addEvent('touchmove', function(event) {
  lastMove = event;
});
30
adrenalin

代わりにchangedTouchesを使用する必要がありますtouches in touchend

div.addEvent("touchstart", function (event) {
    event.preventDefault(); // to avoid scrolling
    span.innerHTML = event.pageX;
});
div.addEvent("touchend", function (event) {
    span.innerHTML = event.changedTouches[0].pageX;
});
8
idsbllp

質問ではjQueryを求めていませんが、jQueryの代替が必要な場合は、このコードを試してください。 jQueryのすべての最新バージョンで動作します。

$(document).on('touchstart', '.className', function (e) {
    console.log(e.originalEvent.touches[0].pageX);
});
$(document).on('touchend', '.className', function (e) {
    console.log(e.originalEvent.changedTouches[0].pageX);
});

オプションで「originalEvent」を省略し、サポートされていないJSのみのスクリプトとjQuery /ブラウザに対して「changedTouches」を使用できます。

2
Ajay Singh

これは非常にうまく機能し、従来のコンピューターと同じイベント属性を回復できることをお勧めします...

if(!('ontouchstart' in document.documentElement)){

Object.onmouseup = function(e){
      your code....
}

}else{

Object.ontouchend = function(e){
e = e.changedTouches[e.changedTouches.length-1];
      Your code....
}

}

管理が非常に簡単です。

*コードを管理するには、Google Chromeを使用します。コンソールモードでは、タッチイベントをキャプチャします。

0
Cherif
touchStart(event) {
  this.startX = event.touches[0].pageX;
},
touchEnd(event) {
  this.endX = event.changedTouches[0].pageX;
},
0
邢博峰