| React 16.4 Pointer Events
|
Showing posts with label Pointer Events. Show all posts
Showing posts with label Pointer Events. Show all posts
Tuesday, May 5, 2020
React 16.4 Pointer Events example
Pointer events were
introduces in React 16.4 to handle
mouse and touch events. In jQuery we
have only mouse events, now with the introduction of touch screen and devices
like iPad we need to handle touch events also. React now introduces pointer
events which can handle both mouse and touch events.
In the below example we will capture 2 Pointer events onPointerEnter & onPointerLeave. We will add these events to a DIV, when we move the mouse over the DIV or touch the DIV the onPointerEnter event will trigger in the event handlers we toggle the isHover state property which will in turn change the color of the DIV. By default the DIV gets silver color, when we hover the mouse over the DIV or touch the DIV its color will change to golden color.
In the below example we will capture 2 Pointer events onPointerEnter & onPointerLeave. We will add these events to a DIV, when we move the mouse over the DIV or touch the DIV the onPointerEnter event will trigger in the event handlers we toggle the isHover state property which will in turn change the color of the DIV. By default the DIV gets silver color, when we hover the mouse over the DIV or touch the DIV its color will change to golden color.
What's new in React 16.4
React
16.4 consists of mainly 2 things. First is the introduction of Pointer Events, and second is a fix to
the getDerivedStateFromProps
component life cycle event.
Pointer events are used to handle mouse and touch activity like hover, enter, leave etc. They are similar to jQuery mouse event handlers like mouseenter, mouseleave, mouseover etc. The difference between jQuery mouse events and React pointer events is that the Pointer events support both Mouse events and Touch events.
The following are the pointer events supported in React 16.4
Pointer events are used to handle mouse and touch activity like hover, enter, leave etc. They are similar to jQuery mouse event handlers like mouseenter, mouseleave, mouseover etc. The difference between jQuery mouse events and React pointer events is that the Pointer events support both Mouse events and Touch events.
The following are the pointer events supported in React 16.4
Subscribe to:
Posts (Atom)
