From 7235291e77873ab368f601b68301fce0ba0eb86a Mon Sep 17 00:00:00 2001
From: Molly Lloyd <molly@mapbox.com>
Date: Fri, 18 May 2018 11:47:58 -0700
Subject: [PATCH] don't fire click event if default is prevented on mousedown
 for a drag event

---
 src/ui/bind_handlers.js                          |  7 ++++++-
 .../mapbox-gl-js-test/simulate_interaction.js    |  9 +++++++++
 test/unit/ui/map_events.test.js                  | 16 ++++++++++++++++
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/ui/bind_handlers.js b/src/ui/bind_handlers.js
index b8f9767bedc..02d17636583 100644
--- a/src/ui/bind_handlers.js
+++ b/src/ui/bind_handlers.js
@@ -25,6 +25,7 @@ export default function bindHandlers(map: Map, options: {interactive: boolean})
     const el = map.getCanvasContainer();
     let contextMenuEvent = null;
     let mouseDown = false;
+    let startPos = null;
 
     for (const name in handlers) {
         (map: any)[name] = new handlers[name](map, options);
@@ -56,6 +57,7 @@ export default function bindHandlers(map: Map, options: {interactive: boolean})
 
     function onMouseDown(e: MouseEvent) {
         mouseDown = true;
+        startPos = DOM.mousePos(el, e);
 
         const mapEvent = new MapMouseEvent('mousedown', map, e);
         map.fire(mapEvent);
@@ -149,7 +151,10 @@ export default function bindHandlers(map: Map, options: {interactive: boolean})
     }
 
     function onClick(e: MouseEvent) {
-        map.fire(new MapMouseEvent('click', map, e));
+        const pos = DOM.mousePos(el, e);
+        if (pos.equals(startPos)) {
+            map.fire(new MapMouseEvent('click', map, e));
+        }
     }
 
     function onDblClick(e: MouseEvent) {
diff --git a/test/node_modules/mapbox-gl-js-test/simulate_interaction.js b/test/node_modules/mapbox-gl-js-test/simulate_interaction.js
index 254fdcaad96..feb462b4c3f 100644
--- a/test/node_modules/mapbox-gl-js-test/simulate_interaction.js
+++ b/test/node_modules/mapbox-gl-js-test/simulate_interaction.js
@@ -18,6 +18,15 @@ exports.click = function (target, options) {
     target.dispatchEvent(new MouseEvent('click', options));
 };
 
+exports.drag = function (target, mousedownOptions, mouseUpOptions) {
+    mousedownOptions = Object.assign({bubbles: true}, mousedownOptions);
+    mouseUpOptions = Object.assign({bubbles: true}, mouseUpOptions);
+    const MouseEvent = window(target).MouseEvent;
+    target.dispatchEvent(new MouseEvent('mousedown', mousedownOptions));
+    target.dispatchEvent(new MouseEvent('mouseup', mouseUpOptions));
+    target.dispatchEvent(new MouseEvent('click', mouseUpOptions));
+};
+
 exports.dblclick = function (target, options) {
     options = Object.assign({bubbles: true}, options);
     const MouseEvent = window(target).MouseEvent;
diff --git a/test/unit/ui/map_events.test.js b/test/unit/ui/map_events.test.js
index 962fecc70bf..b42af8a7607 100644
--- a/test/unit/ui/map_events.test.js
+++ b/test/unit/ui/map_events.test.js
@@ -544,3 +544,19 @@ test(`Map#on mousedown can have default behavior prevented and still fire subseq
     map.remove();
     t.end();
 });
+
+test(`Map#on mousedown doesn't fire subsequent click event if mousepos changes`, (t) => {
+    const map = createMap();
+
+    map.on('mousedown', e => e.preventDefault());
+
+    const click = t.spy();
+    map.on('click', click);
+    const canvas = map.getCanvas();
+
+    simulate.drag(canvas, {}, {clientX: 100, clientY: 100});
+    t.ok(click.notCalled);
+
+    map.remove();
+    t.end();
+});