fix: prevent zoom on mobile when handleTouch is set to false (#293)

strawdynamics · Aug 2, 2019 · d1ea511 · d1ea511
1 parent e982561
commit d1ea511
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 0 deletions.
diff --git a/src/js/Trigger.js b/src/js/Trigger.js
@@ -57,6 +57,10 @@ export default class Trigger {
     return this.settings.zoomPane.isShowing;
   }
 
+  _preventDefault(event) {
+    event.preventDefault();
+  }
+
   _bindEvents() {
     this.settings.el.addEventListener("mouseenter", this._handleEntry, false);
     this.settings.el.addEventListener("mouseleave", this._hide, false);
@@ -66,6 +70,10 @@ export default class Trigger {
       this.settings.el.addEventListener("touchstart", this._handleEntry, false);
       this.settings.el.addEventListener("touchend", this._hide, false);
       this.settings.el.addEventListener("touchmove", this._handleMovement, false);
+    } else {
+      this.settings.el.addEventListener("touchstart", this._preventDefault, false);
+      this.settings.el.addEventListener("touchend", this._preventDefault, false);
+      this.settings.el.addEventListener("touchmove", this._preventDefault, false);
     }
   }
 
@@ -78,6 +86,10 @@ export default class Trigger {
       this.settings.el.removeEventListener("touchstart", this._handleEntry, false);
       this.settings.el.removeEventListener("touchend", this._hide, false);
       this.settings.el.removeEventListener("touchmove", this._handleMovement, false);
+    } else {
+      this.settings.el.removeEventListener("touchstart", this._preventDefault, false);
+      this.settings.el.removeEventListener("touchend", this._preventDefault, false);
+      this.settings.el.removeEventListener("touchmove", this._preventDefault, false);
     }
   }
 

diff --git a/test/testTrigger.js b/test/testTrigger.js
@@ -89,4 +89,28 @@ describe("Trigger", () => {
 
     expect(called).toBe(true);
   });
+
+  it("executes touchstart on mobile when handleTouch is set to true", () => {
+    const opts = triggerOptions();
+    opts.handleTouch = true;
+    const spy = spyOn(Trigger.prototype, "_handleEntry");
+    const trigger = new Trigger(opts);
+
+    const event = new Event("touchstart");
+
+    trigger.settings.el.dispatchEvent(event);
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it("does not execute touchstart on mobile when handleTouch is set to false", () => {
+    const opts = triggerOptions();
+    opts.handleTouch = false;
+    const spy = spyOn(Trigger.prototype, "_handleEntry");
+    const trigger = new Trigger(opts);
+
+    const event = new Event("touchstart");
+
+    trigger.settings.el.dispatchEvent(event);
+    expect(spy).not.toHaveBeenCalled();
+  });
 });