Microsoft Surface：如何让 JavaScript 触摸/拖动事件不被浏览器拦截？答案

【问题标题】：Microsoft Surface: How do I allow JavaScript touch/drag events to work without being intercepted by the browser?Microsoft Surface：如何让 JavaScript 触摸/拖动事件不被浏览器拦截？
【发布时间】：2019-07-08 05:31:28
【问题描述】：

我的网站上有一个谷歌地图地图，但是当它与 Microsoft Surface 平板电脑一起使用时，浏览器拦截了“平移”手势——它试图转到下一个浏览器窗口。如何允许浏览器忽略平移（拖动事件）以使地图正常运行？转到maps.google.com，地图是完全可以拖动的，所以谷歌必须有一个解决方法。

【问题讨论】：

你真的让它正常工作了吗？我仍然面临同样的问题，并尝试对所有元素应用 touch-action CSS 规则，但没有成功。

标签： javascript google-maps touch dom-events windows-rt

【解决方案1】：

根据 MS 的“指针和手势事件”指南（此处为：http://msdn.microsoft.com/en-us/library/ie/hh673557%28v=vs.85%29.aspx#Panning_and_zooming），您需要将 CSS 类添加到要禁用平移的元素，并将“-ms-touch-action”规则设置为像这样的“无”：

.disablePanZoom 
{
    -ms-touch-action: none; /* Shunt all pointer events to JavaScript code. */
}

--编辑--

现在有一个无前缀的触摸动作属性，在 W3C 指针事件候选推荐中提出。

来自MSDN documentation：

从 Internet Explorer 11 开始，此事件的 Microsoft 供应商前缀版本 (-ms-touch-action) 不再受支持，并且可能在未来的版本中被删除。相反，请使用无前缀名称 touch-action，这对于标准合规性和未来兼容性更好。

【讨论】：

我要补充一点，你可以同时做这两个，为了最大的兼容性，这样做并没有什么坏处：.disablePanZoom { -ms-touch-action: none; touch-action: none; }