CODEWITHSUNDEEP
javascriptmobilecanvas
James
James

Reputation: 7533

Scroll the page when a canvas is touch dragged

I have an HTML5 canvas that users interact with by clicking (or tapping).

$(function() {
  var canvas = $('#annotations');
  canvas[0].addEventListener('mousedown', clickCanvas);
  canvas[0].addEventListener('touchstart', clickCanvas);
});

function clickCanvas(e) {
  markLocation(e);
  drawCanvas();
  e.preventDefault();
}

This works as expected. However, on mobile devices if you tap and drag this registers a click at the point where the tap started (this makes sense because it's hooked up to touchstart). The page does not scroll as it normally does when you touch-drag outside the canvas.

When dragging, I would like the tap to be ignored and the whole page scrolled instead.

Upvotes: 0

Views: 2709

Answers (1)

James
James

Reputation: 7533

I was able to resolve this by:

  • Removing e.preventDefault();
  • Hooking up canvas[0].onselectstart = function () { return false; } to prevent text being selected when the canvas is double-clicked (this was what e.preventDefault() did in the first place)
  • Replacing touchstart with touchend

Upvotes: 1

Related Questions