How can I make Mousedown/Mouseup trigger on mobile devices?

Issue

I'm creating a website for my friends to allow them to play a higher quality online implementation of Hashiwokakero.

Some of them have tablets, and everything on the website loads perfectly fine, but when they go to touch and drag to form a bridge from one island to another, the webpage tries to scroll instead (even though there is no scrollable area!).

Currently I am detecting mouse events using the following:

this.canvas.addEventListener('mousedown', 
    (mouseEvent) => this.mousePressed(mouseEvent), false);

this.canvas.addEventListener('mouseup', 
    (mouseEvent) => this.mouseReleased(mouseEvent), false);

Is there a simple way I can go about having my mousePressed() and mouseReleased() functions invoked on mobile?

Thanks!

Solution

Similar events for touch screens will be touchstart and touchend, they are totally the same as mousedown and mouseup events for desktop. From docs:

The touchstart event is fired when one or more touch points are placed on the touch surface.

and

The touchend event is fired when one or more touch points are removed from the touch surface.

You can check docs for more info about touch events.

I also guess that may be you will also need to stop some events from bubbling, and if so, you can take a look at events bubbling and event.stopPropagation() to prevent them from bubbling.

If the logic should be the same for both mousedown/touchstart and mouseup/touchend events, you can bind multiple events to the listener as described here.

Answered By - Commercial Suicide