diff --git a/fixtures/dom/src/components/Header.js b/fixtures/dom/src/components/Header.js index 4a7b1513e66cb..c78eaa6abf40a 100644 --- a/fixtures/dom/src/components/Header.js +++ b/fixtures/dom/src/components/Header.js @@ -65,6 +65,7 @@ class Header extends React.Component { Custom Elements Media Events Pointer Events + Mouse Events diff --git a/fixtures/dom/src/components/fixtures/index.js b/fixtures/dom/src/components/fixtures/index.js index d43a94df3418b..4bbb20180c206 100644 --- a/fixtures/dom/src/components/fixtures/index.js +++ b/fixtures/dom/src/components/fixtures/index.js @@ -12,6 +12,7 @@ import EventPooling from './event-pooling'; import CustomElementFixtures from './custom-elements'; import MediaEventsFixtures from './media-events'; import PointerEventsFixtures from './pointer-events'; +import MouseEventsFixtures from './mouse-events'; const React = window.React; @@ -49,6 +50,8 @@ function FixturesPage() { return ; case '/pointer-events': return ; + case '/mouse-events': + return ; default: return Please select a test fixture.; } diff --git a/fixtures/dom/src/components/fixtures/mouse-events/index.js b/fixtures/dom/src/components/fixtures/mouse-events/index.js new file mode 100644 index 0000000000000..e18f8925db187 --- /dev/null +++ b/fixtures/dom/src/components/fixtures/mouse-events/index.js @@ -0,0 +1,16 @@ +import FixtureSet from '../../FixtureSet'; +import MouseMovement from './mouse-movement'; + +const React = window.React; + +class MouseEvents extends React.Component { + render() { + return ( + + + + ); + } +} + +export default MouseEvents; diff --git a/fixtures/dom/src/components/fixtures/mouse-events/mouse-movement.js b/fixtures/dom/src/components/fixtures/mouse-events/mouse-movement.js new file mode 100644 index 0000000000000..e6706edc238bf --- /dev/null +++ b/fixtures/dom/src/components/fixtures/mouse-events/mouse-movement.js @@ -0,0 +1,48 @@ +import TestCase from '../../TestCase'; + +const React = window.React; + +class MouseMovement extends React.Component { + state = { + movement: {x: 0, y: 0}, + }; + + onMove = event => { + this.setState({x: event.movementX, y: event.movementY}); + }; + + render() { + const {x, y} = this.state; + + const boxStyle = { + padding: '10px 20px', + border: '1px solid #d9d9d9', + margin: '10px 0 20px', + }; + + return ( + + + Mouse over the box below + + + + The reported values should equal the pixel (integer) difference + between mouse movements positions. + + + + Trace your mouse over this box. + + Last movement: {x},{y} + + + + ); + } +} + +export default MouseMovement; diff --git a/packages/react-dom/src/events/SyntheticMouseEvent.js b/packages/react-dom/src/events/SyntheticMouseEvent.js index d1ff4b32a1777..d3319ec487156 100644 --- a/packages/react-dom/src/events/SyntheticMouseEvent.js +++ b/packages/react-dom/src/events/SyntheticMouseEvent.js @@ -8,6 +8,9 @@ import SyntheticUIEvent from './SyntheticUIEvent'; import getEventModifierState from './getEventModifierState'; +let previousScreenX = null; +let previousScreenY = null; + /** * @interface MouseEvent * @see http://www.w3.org/TR/DOM-Level-3-Events/ @@ -34,6 +37,24 @@ const SyntheticMouseEvent = SyntheticUIEvent.extend({ : event.fromElement) ); }, + movementX: function(event) { + if ('movementX' in event) { + return event.movementX; + } + + const screenX = previousScreenX; + previousScreenX = event.screenX; + return screenX ? event.screenX - screenX : 0; + }, + movementY: function(event) { + if ('movementY' in event) { + return event.movementY; + } + + const screenY = previousScreenY; + previousScreenY = event.screenY; + return screenY ? event.screenY - screenY : 0; + }, }); export default SyntheticMouseEvent;
Please select a test fixture.
Trace your mouse over this box.
+ Last movement: {x},{y} +