From fb36d6059171caa32ef0e535fa7014b06042c362 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Wed, 11 Apr 2018 13:01:24 +0200 Subject: [PATCH 1/2] Add section about Pointer Events This PR adds a section about the state of Pointer Events in React. This should be merged only if facebook/react#12507 is accepted as well. --- content/docs/reference-events.md | 35 ++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index 828b63917e3..7e5ea81562c 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -76,6 +76,7 @@ The event handlers below are triggered by an event in the bubbling phase. To reg - [Focus Events](#focus-events) - [Form Events](#form-events) - [Mouse Events](#mouse-events) +- [Pointer Events](#pointer-events) - [Selection Events](#selection-events) - [Touch Events](#touch-events) - [UI Events](#ui-events) @@ -215,6 +216,40 @@ boolean shiftKey * * * +### Pointer Events + +Event names: + +``` +onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture +onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut +``` + +The `onPointerEnter` and `onPointerLeave` events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase. + +Properties: + +As defined in the [W3 spec](https://www.w3.org/TR/pointerevents/), pointer events extend [Mouse Events](#mouse-events) with the following properties: + +```javascript +number pointerId +number width +number height +number pressure +number tiltX +number tiltY +string pointerType +boolean isPrimary +``` + +A note on cross-browser support: + +Pointer events are not yet supported in every browser (at the time of writing this article, supported browsers include: Chrome, Firefox, Edge, and Internet Explorer). React deliberately does not polyfill support for other browsers because a standard-conform polyfill would significantly increase the bundle size of `react-dom`. + +If your application requires pointer events, we recommend adding a third party pointer event polyfill like [PEP](https://github.com/jquery/PEP). + +* * * + ### Selection Events Event names: From 16d0614736f67587649d4e67fb8f79dcf5eaedf8 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Wed, 16 May 2018 15:03:17 +0200 Subject: [PATCH 2/2] =?UTF-8?q?Don=E2=80=99t=20recommend=20PEP=20because?= =?UTF-8?q?=20it=20lacks=20features?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/reference-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index 7e5ea81562c..711b244197b 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -246,7 +246,7 @@ A note on cross-browser support: Pointer events are not yet supported in every browser (at the time of writing this article, supported browsers include: Chrome, Firefox, Edge, and Internet Explorer). React deliberately does not polyfill support for other browsers because a standard-conform polyfill would significantly increase the bundle size of `react-dom`. -If your application requires pointer events, we recommend adding a third party pointer event polyfill like [PEP](https://github.com/jquery/PEP). +If your application requires pointer events, we recommend adding a third party pointer event polyfill. * * *