鼠标按下时X和y坐标

Question

I am currently making a game that requires the player to drag around an object on a touch screen device.

I've used the event listener mousemove , and it has worked on my Intel XDK emulator, but now that I move it to a touch screen device, I need an touch event that is mousemove and mousedown , and I am not sure how to do that.

Example of ideal code:

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

So this ideal code spits out x and y when the mouse is down, and it has moved.

If anyone knows the legit syntax or a different method of doing this, it would be a great help.

I don't want to incorporate JQuery into this, just pure JS.

Thanks! :)

Edit: Let me rephrase this so it is all straight forward. While the user is dragging an object I need a function that spits out x and y of the pointer the entire drag.

Answer 1

Per MDN:

The EventTarget.addEventListener() method registers the specified listener on the EventTarget it's called on. The event target may be an Element in a document, the Document itself, a Window, or any other object that supports events (such as XMLHttpRequest).

Note the "eventTarget" above. The AddEventListener method takes only one string which represents EventType. You'll need to write a custom function in order to iterate multiple events:

 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

For touch devices, you should be looking into touchstart , touchend , touchcancel and touchmove .

Touch events are similar to mouse events except they support simultaneous touches and at different locations on the touch surface.

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events `

Answer 3

MDN has a great post on touch events. The posts are not just full of quality information but also there are lots of javascript code shown which will provide you with a good resource for touch events.

Interfaces

TouchEvent

Represents an event that occurs when the state of touches on the surface changes.

Touch

Represents a single point of contact between the user and the touch surface.

TouchList

Represents a group of touches; this is used when the user has, for example, multiple fingers on the surface at the same time.

---

How does this solve my current problem?

The information above provides greater detail for all the types of events you may want to look into. However, for your specific problem, you should look into touchmove & touchend events.

Side note - check touchmove & touchend links for compatibility concerns.