禁用 Js 和 Html 中的默认触摸手势答案

【问题标题】：Disable default touch gestures in Js and Html禁用 Js 和 Html 中的默认触摸手势
【发布时间】：2018-03-31 00:03:59
【问题描述】：

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

我正在努力让用户在带有触摸屏的画布上绘图。添加对多点触控的支持后，我意识到默认的触控手势（例如滚动或缩放）仍然有效。

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

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

然后我找到了这个 HTML 属性 content="user-scalable=no"，但这也没有用。

所以现在我有点难过，希望得到一些建议。

【问题讨论】：

标签： javascript html

【解决方案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。

【讨论】：

【解决方案2】：

我想通了。 event.preventDefault() 根本不起作用，但使用 <meta name="viewport" content="width=device-width, user-scalable=no"> 我让它正常工作。问题是我在画布中使用该属性而不是元数据，所以我有<canvas id="canvas" width="2000" height="2000" content="user-scalable=no">。不管怎样，谢谢。

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

【讨论】：