（Angular 4）如何绑定全局触摸事件处理程序以禁用 iOS Safari 页面拖动？答案

【问题标题】：(Angular 4) How to a Bind Global Touch Event Handler to Disable iOS Safari Page Drag?（Angular 4）如何绑定全局触摸事件处理程序以禁用 iOS Safari 页面拖动？
【发布时间】：2017-10-13 11:32:03
【问题描述】：

这里的实际问题是我有一个 Angular 4 应用程序，它有一个 D3.js 图表，该图表通过用户触摸拖动（与“touchstart”绑定）接受输入。用户将指针拖到一个值，该值在触摸结束时注册（与'touchend'绑定）。

但是在移动浏览器上，至少在 iOS Safari 上，当我触摸并开始拖动时，整个窗口开始移动......就像向右拖动开始显示上次访问的页面。

我将尝试解决此问题：Prevent iOS safari from moving web-page window so drag event can happen

但是我需要在 Angular 4 中注册一个全局事件处理程序——如何实现这一点，或者对这个问题有什么更好的建议？

【问题讨论】：

见stackoverflow.com/questions/36763141/…

标签： javascript angular d3.js mobile-safari

【解决方案1】：

不确定你真正的问题是什么..

如果您在谈论 Safari 历史手势（从屏幕向右滑动开始显示最后访问的页面），那么它似乎是在操作系统/浏览器级别处理的，我们没有任何回调，请检查 cmets这里： iOS 7 - is there a way to disable the swipe back and forward functionality in Safari?

【讨论】：

真正的问题是我构建了一个具有仪表图表元素的移动应用程序。它有一个指针指针，用户可以拖动（touchstart / touchmove / touchend 事件）......但在 iOS Safari 上，由于这个历史手势，水平拖动会拖动整个页面。

【解决方案2】：

找到了解决这个问题的方法！将此添加到 index.html 中的 head 或在您的 JS 脚本中的其他地方定义：

<script>
  document.ontouchmove = function(event) {
    event.preventDefault();
  }
</script>

【讨论】：