我有一个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