diff --git a/src/js/utils/dom.js b/src/js/utils/dom.js index 32b8341f1..da627f377 100644 --- a/src/js/utils/dom.js +++ b/src/js/utils/dom.js @@ -788,7 +788,8 @@ export function isSingleLeftClick(event) { // `mouseup` event on a single left click has // `button` and `buttons` equal to 0 - if (event.button === 0 && event.buttons === 0) { + if (event.type === 'mouseup' && event.button === 0 && + event.buttons === 0) { return true; } diff --git a/test/unit/test-helpers.js b/test/unit/test-helpers.js index 5257e4d8d..7995cd1cf 100644 --- a/test/unit/test-helpers.js +++ b/test/unit/test-helpers.js @@ -125,12 +125,11 @@ const TestHelpers = { }, /** - * Triggers an event on a DOM node natively. + * Creates an event. * - * @param {Element} element - * @param {string} eventType + * @param {string} eventType */ - triggerDomEvent(element, eventType) { + createEvent(eventType) { let event; if (document.createEvent) { @@ -143,6 +142,18 @@ const TestHelpers = { event.eventName = eventType; + return event; + }, + + /** + * Triggers an event on a DOM node natively. + * + * @param {Element} element + * @param {string} eventType + */ + triggerDomEvent(element, eventType) { + const event = TestHelpers.createEvent(eventType); + if (document.createEvent) { element.dispatchEvent(event); } else { diff --git a/test/unit/utils/dom.test.js b/test/unit/utils/dom.test.js index 1aa2ee286..420147f31 100644 --- a/test/unit/utils/dom.test.js +++ b/test/unit/utils/dom.test.js @@ -2,6 +2,7 @@ import document from 'global/document'; import sinon from 'sinon'; import * as Dom from '../../../src/js/utils/dom.js'; +import TestHelpers from '../test-helpers.js'; QUnit.module('dom'); @@ -601,3 +602,55 @@ QUnit.test('getBoundingClientRect() returns an object for elements that support assert.strictEqual(actual[k], expected[k], `the "${k}" returned by the Dom util matches what was returned by the mock element`); }); }); + +QUnit.test('isSingleLeftClick() returns false for mousemove event', function(assert) { + const mouseEvent = TestHelpers.createEvent('mousemove'); + + mouseEvent.button = 0; + mouseEvent.buttons = 0; + + assert.notOk(Dom.isSingleLeftClick(mouseEvent), 'a mousemove event is not a single left click'); +}); + +QUnit.test('isSingleLeftClick() returns true for mouseup event', function(assert) { + const mouseEvent = TestHelpers.createEvent('mouseup'); + + mouseEvent.button = 0; + mouseEvent.buttons = 0; + + assert.ok(Dom.isSingleLeftClick(mouseEvent), 'a mouseup event is a single left click'); +}); + +QUnit.test('isSingleLeftClick() checks return values for mousedown event', function(assert) { + const mouseEvent = TestHelpers.createEvent('mousedown'); + + // Left mouse click + mouseEvent.button = 0; + mouseEvent.buttons = 0; + + assert.notOk(Dom.isSingleLeftClick(mouseEvent), 'a left mouse click on an older browser (Safari) is a single left click'); + + // Left mouse click + mouseEvent.button = 0; + mouseEvent.buttons = 1; + + assert.ok(Dom.isSingleLeftClick(mouseEvent), 'a left mouse click on browsers that supporting buttons property is a single left click'); + + // Right mouse click + mouseEvent.button = 2; + mouseEvent.buttons = 2; + + assert.notOk(Dom.isSingleLeftClick(mouseEvent), 'a right mouse click is not a single left click'); + + // Touch event on some mobiles + mouseEvent.button = 0; + mouseEvent.buttons = undefined; + + assert.ok(Dom.isSingleLeftClick(mouseEvent), 'a touch event on mobiles is a single left click'); + + // Chrome simulates mobile devices + mouseEvent.button = undefined; + mouseEvent.buttons = undefined; + + assert.ok(Dom.isSingleLeftClick(mouseEvent), 'a touch event on simulated mobiles is a single left click'); +});