diff --git a/packages/react-dom/src/events/SyntheticMouseEvent.js b/packages/react-dom/src/events/SyntheticMouseEvent.js index 02a7926e68..28894dff4a 100644 --- a/packages/react-dom/src/events/SyntheticMouseEvent.js +++ b/packages/react-dom/src/events/SyntheticMouseEvent.js @@ -53,7 +53,7 @@ const SyntheticMouseEvent = SyntheticUIEvent.extend({ return 0; } - return event.screenX - screenX; + return event.type === 'mousemove' ? event.screenX - screenX : 0; }, movementY: function(event) { if ('movementY' in event) { @@ -68,7 +68,7 @@ const SyntheticMouseEvent = SyntheticUIEvent.extend({ return 0; } - return event.screenY - screenY; + return event.type === 'mousemove' ? event.screenY - screenY : 0; }, }); diff --git a/packages/react-dom/src/events/__tests__/SyntheticMouseEvent-test.js b/packages/react-dom/src/events/__tests__/SyntheticMouseEvent-test.js new file mode 100644 index 0000000000..034a1aa8d6 --- /dev/null +++ b/packages/react-dom/src/events/__tests__/SyntheticMouseEvent-test.js @@ -0,0 +1,80 @@ +/** + * Copyright (c) 2013-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @emails react-core + */ + +'use strict'; + +let React; +let ReactDOM; + +describe('SyntheticMouseEvent', () => { + let container; + + beforeEach(() => { + React = require('react'); + ReactDOM = require('react-dom'); + + // The container has to be attached for events to fire. + container = document.createElement('div'); + document.body.appendChild(container); + }); + + afterEach(() => { + document.body.removeChild(container); + container = null; + }); + + it('should only use values from movementX/Y when event type is mousemove', () => { + const events = []; + const onMouseMove = event => { + events.push(event.movementX); + }; + + const onMouseDown = event => { + events.push(event.movementX); + }; + + const node = ReactDOM.render( +
, + container, + ); + + let event = new MouseEvent('mousemove', { + relatedTarget: null, + bubbles: true, + screenX: 2, + screenY: 2, + }); + + node.dispatchEvent(event); + + event = new MouseEvent('mousemove', { + relatedTarget: null, + bubbles: true, + screenX: 8, + screenY: 8, + }); + + node.dispatchEvent(event); + + // Now trigger a mousedown event to see if movementX has changed back to 0 + event = new MouseEvent('mousedown', { + relatedTarget: null, + bubbles: true, + screenX: 25, + screenY: 65, + }); + + node.dispatchEvent(event); + + expect(events.length).toBe(3); + expect(events[0]).toBe(0); + expect(events[1]).toBe(6); + expect(events[2]).toBe(0); // mousedown event should have movementX at 0 + }); +});