fix(content): tap-click deadlock (#17170)

fixes #17138
fixes #16863
fixes #16191
fixes #16911

core/src/components/content/content.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, QueueApi } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, QueueApi } from '@stencil/core';
 
 import { Color, Config, Mode, ScrollBaseDetail, ScrollDetail } from '../../interface';
 import { isPlatform } from '../../utils/platform';
@@ -113,8 +113,14 @@ export class Content implements ComponentInterface {
   }
 
   componentDidUnload() {
-    if (this.watchDog) {
-      clearInterval(this.watchDog);
+    this.onScrollEnd();
+  }
+
+  @Listen('click', { capture: true })
+  onClick(ev: Event) {
+    if (this.isScrolling) {
+      ev.preventDefault();
+      ev.stopPropagation();
     }
   }
 
@@ -269,13 +275,14 @@ export class Content implements ComponentInterface {
   }
 
   private onScrollEnd() {
-
     clearInterval(this.watchDog);
     this.watchDog = null;
-    this.isScrolling = false;
-    this.ionScrollEnd.emit({
-      isScrolling: false
-    });
+    if (this.isScrolling) {
+      this.isScrolling = false;
+      this.ionScrollEnd.emit({
+        isScrolling: false
+      });
+    }
   }
 
   hostData() {

core/src/components/nav/test/basic/index.html

@@ -37,6 +37,12 @@
   --ion-background-color-rgb: 0,0,0;
   --ion-text-color-rgb: 255,255,255;
 }
+
+[f] {
+  background: green;
+  width: 100px;
+  height: 100px;
+}
 </style>
   <script>
     class PageOne extends HTMLElement {
@@ -74,6 +80,15 @@
                 <ion-button class="next">Go to Page Three</ion-button>
               </ion-nav-push>
             </div>
+            <div f></div>
+            <div f></div>
+            <div f></div>
+            <div f></div>
+            <div f></div>
+            <div f></div>
+            <div f></div>
+            <div f></div>
+
           </ion-content>
         `;
       }