鼠標按下時X和y坐標

Question

我目前正在制作一款游戲，要求玩家在觸摸屏設備上的某個物體周圍拖動。

我已經使用了事件偵聽器mousemove ，並且它已經在我的Intel XDK模擬器上運行了，但是現在我將其移動到觸摸屏設備上，我需要一個mousemove和mousedown的觸摸事件，而且我不確定該怎么做。那。

理想代碼示例：

canvas.addEventListener("mousemove" && "mousedown", function(e){  
    pointerX = e.pageX;
    pointerY = e.pageY;
}

因此，當鼠標向下移動時，此理想代碼會吐出x和y。

如果有人知道合法的語法或執行此操作的其他方法，那將是很大的幫助。

我不想將JQuery合並到其中，而只是純JS。

謝謝！ :)

編輯：讓我改寫一下，這樣就很簡單了。 當用戶拖動對象時，我需要一個函數，該函數會在整個拖動過程中吐出指針的x和y。

Answer 1

每個MDN：

EventTarget.addEventListener（）方法在調用它的EventTarget上注冊指定的偵聽器。 事件目標可以是文檔中的Element，文檔本身，Window或支持事件的任何其他對象（例如XMLHttpRequest）。

注意上面的“ eventTarget”。 AddEventListener方法僅采用一個表示EventType的字符串。 您需要編寫一個自定義函數來迭代多個事件：

 const target = document.getElementById("myDiv"); ['mousedown', 'mousemove'].forEach(eventType => { target.addEventListener(eventType, (event) => { target.innerText = `x: ${event.pageX} y: ${event.pageY}`; }); }); 

 #myDiv { width: 100px; height: 100px; background-color: orange; color: white; } 

 <div id="myDiv"></div> 

Answer 2

對於觸摸設備，您應該查看touchstart ， touchend ， touchcancel和touchmove 。

觸摸事件與鼠標事件類似，不同之處在於它們支持同時觸摸並且在觸摸表面的不同位置上。

https:// developer.mozilla.org/ zh- CN/ docs/ Web/ API/ Touch_events`

Answer 3

MDN在觸摸事件方面有很好的帖子。 這些帖子不僅充滿了質量信息，而且還顯示了許多JavaScript代碼，它們將為您提供有關觸摸事件的良好資源。

介面

觸控事件

表示在表面上的觸摸狀態更改時發生的事件。

觸摸

表示用戶和觸摸表面之間的單點接觸。

觸控列表

代表一組接觸； 例如，當用戶同時在表面上有多個手指時，將使用此功能。

---

這如何解決我當前的問題？

上面的信息為您可能需要研究的所有類型的事件提供了更詳細的信息。 但是，對於您的特定問題，您應該研究touchmove和touchend事件。

旁注 -檢查touchmove和touchend鏈接是否存在兼容性問題。