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

Question

The practical problem here is that I have an Angular 4 app that has a D3.js chart that takes input via user touch drag (bound with 'touchstart'). The user drags a needle to a value, which is registered upon touch end (bound with 'touchend').

However on a mobile browser, at least on iOS Safari, when I touch and start dragging the whole window starts to move...like dragging to right starts to show the last visited page.

I will be trying out this as a fix: Prevent iOS safari from moving web-page window so drag event can happen

But I will need to register a global event handler in Angular 4 – how to achieve this, or any better suggestions for the problem?

Answer 1

Not sure about what your real problem is ..

If you're talking about Safari history gestures (swipe starting off-screen to the right shows the last visited page), then it seems that it's handled on OS/browser level and we don't have any callback, check comments here : iOS 7 - is there a way to disable the swipe back and forward functionality in Safari?

Answer 2

Found the solution to this problem! Add this to head in index.html or define elsewhere in your JS scripts:

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