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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.