Question

所以我用HTML和JS制作了一个小的HTML画布应用程序，并遇到了触摸手势的问题。

我正致力于允许用户在带触摸屏的画布上绘图。添加对多点触控的支持后，我意识到默认的触摸手势（例如滚动或缩放）仍处于活动状态。

我需要禁用整个页面的默认触摸手势。

我的第一个想法是使用Event.preventDefault()，但它会发出错误并且什么都不解决。

然后我发现了这个HTML属性content="user-scalable=no"，但这也不起作用。

所以现在我有点难过，并且会喜欢一些建议。

Answer 1

我知道你提到使用event.preventDefault()，但这有点令人困惑，因为这不适合你，因为这是建议这样做的方法。

试试这个：

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

它执行以下操作：

每当用户开始触摸其设备的屏幕（ontouchstart）时运行。
该函数被赋予event变量，该变量包含有关事件的详细信息，包括一个名为touches的数组，其中包含有关每次触摸的信息。这个数组有一个项目，用于按下屏幕的每个地方，所以通过获取它的长度（event.touches.length）我们得到用户使用了多少个手指 - 显然我们不想取消单个按下，否则用户将无法做任何事情。
最后，我们调用event.preventDefault()来阻止这些事件导致的默认操作。您还可以在event.preventDefault行上方实施自己的自定义操作。

有关详细信息，请查看this StackOverflow page。

Answer 2

我明白了。 event.preventDefault()根本不起作用，但使用<meta name="viewport" content="width=device-width, user-scalable=no">这使我能够正常工作。问题是我在画布中使用该属性而不是元，所以我有<canvas id="canvas" width="2000" height="2000" content="user-scalable=no">。无论如何，谢谢。

编辑：nope仍无法正常工作。我使用chrome工具在我的电脑上进行调试，但似乎对实际触摸屏没有影响

在Js和Html中禁用默认触摸手势

2 个答案: