Do not propagate click if the event is handled

dist/pinch-zoom.cjs.js

@@ -76,6 +76,7 @@ function createPoint() {
 const MIN_SCALE = 0.01;
 const ALLOW_PAN_MIN_SCALE = -1;
 const RESET_TO_MIN_SCALE_LIMIT = -1;
+const BUTTON_LEFT = 0;
 const roundedCmp = (a, b) => {
     return Math.round(a * 100) - Math.round(b * 100);
 };
@@ -114,6 +115,7 @@ class PinchZoom extends HTMLElement {
             },
         });
         this.addEventListener('wheel', event => this._onWheel(event));
+        this.addEventListener('click', event => this._onClick(event, pointerTracker));
     }
     static get observedAttributes() { return [minScaleAttr]; }
     attributeChangedCallback(name, oldValue, newValue) {
@@ -438,6 +440,17 @@ class PinchZoom extends HTMLElement {
             });
         }
     }
+    _onClick(event, pointerTracker) {
+        // We never handle non-left-clicks
+        if (event.button !== BUTTON_LEFT) {
+            return;
+        }
+        const wasPanning = pointerTracker.currentPointers.length === 0;
+        const handled = !(wasPanning && !this._allowPan());
+        if (handled) {
+            this._maybeStopPropagate(event);
+        }
+    }
 }
 
 customElements.define('pinch-zoom', PinchZoom);

dist/pinch-zoom.d.ts

@@ -64,5 +64,6 @@ export default class PinchZoom extends HTMLElement {
     private _maybeStopPropagate;
     private _allowPan;
     private _maybeEmitCancel;
+    private _onClick;
 }
 export {};

dist/pinch-zoom.es.js

@@ -72,6 +72,7 @@ function createPoint() {
 const MIN_SCALE = 0.01;
 const ALLOW_PAN_MIN_SCALE = -1;
 const RESET_TO_MIN_SCALE_LIMIT = -1;
+const BUTTON_LEFT = 0;
 const roundedCmp = (a, b) => {
     return Math.round(a * 100) - Math.round(b * 100);
 };
@@ -110,6 +111,7 @@ class PinchZoom extends HTMLElement {
             },
         });
         this.addEventListener('wheel', event => this._onWheel(event));
+        this.addEventListener('click', event => this._onClick(event, pointerTracker));
     }
     static get observedAttributes() { return [minScaleAttr]; }
     attributeChangedCallback(name, oldValue, newValue) {
@@ -434,6 +436,17 @@ class PinchZoom extends HTMLElement {
             });
         }
     }
+    _onClick(event, pointerTracker) {
+        // We never handle non-left-clicks
+        if (event.button !== BUTTON_LEFT) {
+            return;
+        }
+        const wasPanning = pointerTracker.currentPointers.length === 0;
+        const handled = !(wasPanning && !this._allowPan());
+        if (handled) {
+            this._maybeStopPropagate(event);
+        }
+    }
 }
 
 customElements.define('pinch-zoom', PinchZoom);

dist/pinch-zoom.js

@@ -257,6 +257,7 @@ var PinchZoom = (function () {
     const MIN_SCALE = 0.01;
     const ALLOW_PAN_MIN_SCALE = -1;
     const RESET_TO_MIN_SCALE_LIMIT = -1;
+    const BUTTON_LEFT = 0;
     const roundedCmp = (a, b) => {
         return Math.round(a * 100) - Math.round(b * 100);
     };
@@ -295,6 +296,7 @@ var PinchZoom = (function () {
                 },
             });
             this.addEventListener('wheel', event => this._onWheel(event));
+            this.addEventListener('click', event => this._onClick(event, pointerTracker));
         }
         static get observedAttributes() { return [minScaleAttr]; }
         attributeChangedCallback(name, oldValue, newValue) {
@@ -619,6 +621,17 @@ var PinchZoom = (function () {
                 });
             }
         }
+        _onClick(event, pointerTracker) {
+            // We never handle non-left-clicks
+            if (event.button !== BUTTON_LEFT) {
+                return;
+            }
+            const wasPanning = pointerTracker.currentPointers.length === 0;
+            const handled = !(wasPanning && !this._allowPan());
+            if (handled) {
+                this._maybeStopPropagate(event);
+            }
+        }
     }
 
     customElements.define('pinch-zoom', PinchZoom);

dist/pinch-zoom.mjs

@@ -72,6 +72,7 @@ function createPoint() {
 const MIN_SCALE = 0.01;
 const ALLOW_PAN_MIN_SCALE = -1;
 const RESET_TO_MIN_SCALE_LIMIT = -1;
+const BUTTON_LEFT = 0;
 const roundedCmp = (a, b) => {
     return Math.round(a * 100) - Math.round(b * 100);
 };
@@ -110,6 +111,7 @@ class PinchZoom extends HTMLElement {
             },
         });
         this.addEventListener('wheel', event => this._onWheel(event));
+        this.addEventListener('click', event => this._onClick(event, pointerTracker));
     }
     static get observedAttributes() { return [minScaleAttr]; }
     attributeChangedCallback(name, oldValue, newValue) {
@@ -434,6 +436,17 @@ class PinchZoom extends HTMLElement {
             });
         }
     }
+    _onClick(event, pointerTracker) {
+        // We never handle non-left-clicks
+        if (event.button !== BUTTON_LEFT) {
+            return;
+        }
+        const wasPanning = pointerTracker.currentPointers.length === 0;
+        const handled = !(wasPanning && !this._allowPan());
+        if (handled) {
+            this._maybeStopPropagate(event);
+        }
+    }
 }
 
 customElements.define('pinch-zoom', PinchZoom);

lib/pinch-zoom.ts

@@ -91,6 +91,8 @@ const MIN_SCALE = 0.01;
 const ALLOW_PAN_MIN_SCALE = -1;
 const RESET_TO_MIN_SCALE_LIMIT = -1;
 
+const BUTTON_LEFT = 0;
+
 const roundedCmp = (a: number, b: number) => {
   return Math.round(a * 100) - Math.round(b * 100)
 }
@@ -142,6 +144,7 @@ export default class PinchZoom extends HTMLElement {
     });
 
     this.addEventListener('wheel', event => this._onWheel(event));
+    this.addEventListener('click', event => this._onClick(event, pointerTracker));
   }
 
   attributeChangedCallback(name: string, oldValue: string, newValue: string) {
@@ -552,4 +555,17 @@ export default class PinchZoom extends HTMLElement {
       });
     }
   }
+
+  private _onClick(event: MouseEvent, pointerTracker: PointerTracker) {
+    // We never handle non-left-clicks
+    if (event.button !== BUTTON_LEFT) {
+      return;
+    }
+
+    const wasPanning = pointerTracker.currentPointers.length === 0;
+    const handled = !(wasPanning && !this._allowPan());
+    if (handled) {
+      this._maybeStopPropagate(event);
+    }
+  }
 }