触摸拖动画布时滚动页面

Scroll the page when a canvas is touch dragged

本文关键字：滚动 布时 拖动 动画 触摸      更新时间：2023-09-26

我有一个HTML5画布，用户通过单击（或点击）与之交互。

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

这按预期工作。但是，在移动设备上，如果您点击并拖动，则会在点击开始的地方注册一次点击（这是有道理的，因为它连接到touchstart）。当您触摸并拖动到画布外部时，页面不会像往常那样滚动。

拖动时，我希望忽略点击并滚动整个页面。

我能够通过以下方式解决此问题：

  • 删除e.preventDefault();
  • 连接canvas[0].onselectstart = function () { return false; }以防止双击画布时选择文本（这是e.preventDefault()首先所做的）
  • 将touchstart替换为touchend
相关文章：