如何捕捉touchend座標？

我試圖捕獲touchend事件上的觸摸座標，但未定義。 touchstart活動效果很好，但touchend上的相同概念失敗。我用mousedown和mouseup和that構建此代碼的作品很好。如何捕捉touchend座標？

我錯過了什麼？

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

來源

2013-07-30 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; 
});

來源

2013-07-30 21:24:15 adrenalin

這是否容易？謝謝！爲什麼沒有'mouseup'上的'mousemove'？ – Rikard

我不知道。而且我會猜想，touchend事件會包括它結束的位置，但也可能存在無法提供的角落情況，例如觸摸退出區域時（不可能給出**的明確值當前**即使之前已知）。 'mouseup'然後又是* always *區域，當區域退出時使用'mouseout'。 – adrenalin

有道理。再次感謝你！ – Rikard

我一直在尋找的specification，4個觸摸事件從touchEvent對象，它包含所有的觸摸（屏幕上的每個手指）在的時間信息3個名單atributes繼承事件，每個列表根據此標準節省觸摸：

changedTouches：保存已超出目標元素表面的觸摸。

touches：保存所有當前觸摸。

targetTouch：保存目標元素表面內的所有當前觸摸。

事件touchend將手指擡起的位置保存在changedTouches，並且沒有任何內容保存在其他任何列表中，因此，如果您需要訪問此對象，則應使用event.changedTouches[event.changedTouches.length-1]，此操作將返回帶有pageX的觸摸對象，以及pageY座標的屬性。
整條生產線將是：

我一直無法理解卻是，如果沒有在touchEvent對象座標atributes，爲什麼你在touchstart和touchmove事件使用它們，而不是與touchend。也許執行添加了這個快捷方式，或者我錯過了。

來源

2014-07-10 00:54:24

這正是我所需要的。在某些設備上，如果移動更像是水龍頭，則不會觸發touchmove。所以從touchmove中存儲事件失敗了。這種方法每次都有效。 :) –

它是e.originalEvent.changedTouches [...] – rttmax

originalEvent未定義爲在touchend的處理程序中找到的事件對象。 –

您應該使用changedTouches代替touches在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; 
});

來源

2016-11-25 15:31:32 idsbllp

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

來源

2017-04-15 07:41:59

您能否通過提供更多信息來擴展您的答案？只需一兩句話來解釋你的代碼就足夠了。 – Frits

雖然這個問題沒有問的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」，並使用「changedTouches」的JS腳本只和不支持的jQuery /瀏覽器。

來源

2017-07-30 11:51:30

如何捕捉touchend座標？

回答

相關問題