Search code examples
javascriptangulard3.jsmobile-safari

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

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?

Solution

  • 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>