1

So I'm making a small HTML canvas application in HTML and JS, and ran into a problem with touch gestures.

I am working on allowing users to draw on a canvas with a touch screen. After adding support for multi touch I realized that the default touch gestures, such as scrolling or zooming, are still active.

I need to disable the default touch gestures for the entire page.

My first idea was to use Event.preventDefault() but it gives off an error and solves nothing.

Then I found this HTML attribute content="user-scalable=no" but that didn't work either.

So now I'm a bit stumped and would love some advice.

ncardeli
  • 3,452
  • 2
  • 22
  • 27
CEbbinghaus
  • 86
  • 1
  • 10

2 Answers2

1

I know that you mentioned using event.preventDefault(), but it is a little confusing that this did not work for you, as it is the recommended way to do something like this.

Try this:

window.ontouchstart = function(event) {
    if (event.touches.length>1) { //If there is more than one touch
        event.preventDefault();
    }
}

It does the following:

  1. Runs whenever the user begins touching their device's screen (ontouchstart).
  2. The function is given the event variable, which contains details about the event, including an array called touches with information about each touch in it. This array has an item for each place the screen is being pressed, so by getting it's length (event.touches.length) we get how many fingers the user is using - obviously we do not want to cancel single presses, as otherwise the user will not be able to do anything.
  3. Finally, we call event.preventDefault() to prevent the default actions caused by these events. You could also implement your own custom actions above the event.preventDefault line.

For further information, you can take a look at this StackOverflow page.

Toastrackenigma
  • 7,604
  • 4
  • 45
  • 55
0

i figured it out. the event.preventDefault() doesnt work at all but using <meta name="viewport" content="width=device-width, user-scalable=no"> this i got it to work properly. the issue was that i was using that attribute in my canvas instead of the meta so i had <canvas id="canvas" width="2000" height="2000" content="user-scalable=no">. thanks either way.

Edit: nope still not working. I was debugging on my pc with the chrome tools but seems to have had no effect on an actual touchscreen

CEbbinghaus
  • 86
  • 1
  • 10