0

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?

jitender
  • 10,238
  • 1
  • 18
  • 44
ux.engineer
  • 10,082
  • 13
  • 67
  • 112
  • See https://stackoverflow.com/questions/36763141/is-there-any-lifecycle-hook-like-window-onbeforeunload-in-angular2 – kemsky Oct 19 '17 at 11:39

2 Answers2

0

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?

SanDoo
  • 31
  • 3
  • The real problem is that I've built an mobile application that has a gauge chart element. It has a needle pointer which user can drag (touchstart / touchmove / touchend events)... But on iOS Safari horizontal dragging drags the whole page because of this history gesture. – ux.engineer Oct 31 '17 at 11:39
0

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>
ux.engineer
  • 10,082
  • 13
  • 67
  • 112