Resolve touch through issue with a global timestamp

jerrybendy · Dec 24, 2020 · 71449a9 · 71449a9
1 parent c0c3e4a
commit 71449a9
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/index.js b/index.js
@@ -31,6 +31,10 @@ var isPassiveSupported = (function() {
     return supportsPassive;
 })();
 
+// Save last touch time globally (touch start time or touch end time), if a `click` event triggered,
+// and the time near by the last touch time, this `click` event will be ignored. This is used for
+// resolve touch through issue.
+var globalLastTouchTime = 0;
 
 var vueTouchEvents = {
     install: function (Vue, constructorOptions) {
@@ -51,10 +55,10 @@ var vueTouchEvents = {
                 $el = this;
 
             if (isTouchEvent) {
-                $this.lastTouchStartTime = event.timeStamp;
+                globalLastTouchTime = event.timeStamp;
             }
 
-            if (isMouseEvent && $this.lastTouchStartTime && event.timeStamp - $this.lastTouchStartTime < 350) {
+            if (isMouseEvent && globalLastTouchTime && event.timeStamp - globalLastTouchTime < 350) {
                 return;
             }
 
@@ -131,7 +135,7 @@ var vueTouchEvents = {
                 isMouseEvent = event.type.indexOf('mouse') >= 0;
 
             if (isTouchEvent) {
-                $this.lastTouchEndTime = event.timeStamp;
+                globalLastTouchTime = event.timeStamp;
             }
 
             var touchholdEnd = isTouchEvent && !$this.touchHoldTimer;
@@ -141,7 +145,7 @@ var vueTouchEvents = {
 
             removeTouchClass(this);
 
-            if (isMouseEvent && $this.lastTouchEndTime && event.timeStamp - $this.lastTouchEndTime < 350) {
+            if (isMouseEvent && globalLastTouchTime && event.timeStamp - globalLastTouchTime < 350) {
                 return;
             }
 
@@ -298,6 +302,7 @@ var vueTouchEvents = {
                             // change the passive option for the moving event if disablePassive modifier exists
                             passiveOpt = false;
                         }
+                    // fallthrough
                     default:
                         $this.callbacks[eventType] = $this.callbacks[eventType] || [];
                         $this.callbacks[eventType].push(binding);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue2-touch-events",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Simple touch events support for vueJS2",
   "main": "index.js",
   "types": "index.d.ts",