mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-22 20:01:57 +00:00
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.
This commit is contained in:
committed by
Andrew Clark
parent
69d46aa3e0
commit
988a67739d
@@ -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:
|
||||
|
||||
Reference in New Issue
Block a user