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

Question

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

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

我将尝试这个作为修复：Prevent iOS safari from moving web-page window so drag event can happen

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

Answer 1

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

如果您谈论的是 Safari 历史记录手势（从屏幕外向右滑动开始显示上次访问的页面），那么它似乎是在 OS/browser 级别处理的，我们没有任何回调，在这里查看评论： iOS 7 - is there a way to disable the swipe back and forward functionality in Safari?

Answer 2

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

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

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

(Angular 4) How to a Bind Global Touch Event Handler to Disable iOS Safari Page Drag?

javascript

mobile-safari

d3.js

angular