flick should not trigger click

rleddy · Feb 6, 2022 · d086e15 · d086e15
1 parent 91a3768
commit d086e15
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 5 deletions.
diff --git a/demo/click-tap.html b/demo/click-tap.html
@@ -23,6 +23,7 @@
 
   // and forward it it to panzoom.
   var pz = panzoom(element, {
+    autocenter: true,
     onClick(e) {
       document.getElementById('log').innerText = 'Clicked! Event target is: ' + e.target;
     }

diff --git a/dist/panzoom.js b/dist/panzoom.js
@@ -94,6 +94,11 @@ function createPanZoom(domElement, options) {
   var mouseX;
   var mouseY;
 
+  // Where the first click has happened, so that we can differentiate
+  // between pan and click
+  var clickX;
+  var clickY;
+
   var pinchZoomLength;
 
   var smoothScroll;
@@ -633,6 +638,8 @@ function createPanZoom(domElement, options) {
     var point = transformToScreen(offset.x, offset.y);
     mouseX = point.x;
     mouseY = point.y;
+    clickX = mouseX;
+    clickY = mouseY;
 
     smoothScroll.cancel();
     startTouchListenerIfNeeded();
@@ -709,6 +716,10 @@ function createPanZoom(domElement, options) {
     // and then notify:
     if (!options.onClick) return;
     clearPendingClickEventTimeout();
+    var dx = mouseX - clickX;
+    var dy = mouseY - clickY;
+    var l = Math.sqrt(dx * dx + dy * dy);
+    if (l > 5) return; // probably they are panning, ignore it
 
     pendingClickEventTimeout = setTimeout(function() {
       pendingClickEventTimeout = 0;
@@ -787,8 +798,8 @@ function createPanZoom(domElement, options) {
 
     var offset = getOffsetXY(e);
     var point = transformToScreen(offset.x, offset.y);
-    mouseX = point.x;
-    mouseY = point.y;
+    clickX = mouseX = point.x;
+    clickY = mouseY = point.y;
 
     // We need to listen on document itself, since mouse can go outside of the
     // window, and we will loose it

diff --git a/dist/panzoom.min.js b/dist/panzoom.min.js
diff --git a/index.js b/index.js
@@ -93,6 +93,11 @@ function createPanZoom(domElement, options) {
   var mouseX;
   var mouseY;
 
+  // Where the first click has happened, so that we can differentiate
+  // between pan and click
+  var clickX;
+  var clickY;
+
   var pinchZoomLength;
 
   var smoothScroll;
@@ -632,6 +637,8 @@ function createPanZoom(domElement, options) {
     var point = transformToScreen(offset.x, offset.y);
     mouseX = point.x;
     mouseY = point.y;
+    clickX = mouseX;
+    clickY = mouseY;
 
     smoothScroll.cancel();
     startTouchListenerIfNeeded();
@@ -708,6 +715,10 @@ function createPanZoom(domElement, options) {
     // and then notify:
     if (!options.onClick) return;
     clearPendingClickEventTimeout();
+    var dx = mouseX - clickX;
+    var dy = mouseY - clickY;
+    var l = Math.sqrt(dx * dx + dy * dy);
+    if (l > 5) return; // probably they are panning, ignore it
 
     pendingClickEventTimeout = setTimeout(function() {
       pendingClickEventTimeout = 0;
@@ -786,8 +797,8 @@ function createPanZoom(domElement, options) {
 
     var offset = getOffsetXY(e);
     var point = transformToScreen(offset.x, offset.y);
-    mouseX = point.x;
-    mouseY = point.y;
+    clickX = mouseX = point.x;
+    clickY = mouseY = point.y;
 
     // We need to listen on document itself, since mouse can go outside of the
     // window, and we will loose it