Polyfill of the PointerEvents W3C spec
npm install @openlayers/pepjsPEP polyfills pointer events in all browsers that haven't yet implemented them, providing a unified, responsive input model for all devices and input types. You can read more about pointer events below.
1. Place the PEP script in the document head
-
2. By default, no pointer events are sent from an element. This maximizes the possibility that a browser can deliver smooth scrolling and jank-free gestures. If you want to receive events, you must set the touch-action property of that element. Set up some elements to create events with the touch-action attribute.
3. Listen for the desired events
- pointermove: a pointer moves, similar to touchmove or mousemove.
- pointerdown: a pointer is activated, or a device button held.
- pointerup: a pointer is deactivated, or a device button released.
- pointerover: a pointer has moved onto an element.
- pointerout: a pointer is no longer on an element it once was.
- pointerenter: a pointer enters the bounding box of an element.
- pointerleave: a pointer leaves the bounding box of an element.
- pointercancel: a pointer will no longer generate events.
4. As elements come and go, or have their touch-action attribute changed, they will send the proper set of pointer events.
``html`
See also the examples in the W3C Pointer Events Specification and our own samples for using PEP.
`shell`
npm install pepjs
`javascript`
import 'pepjs'
You can use pointer events with jQuery and PEP:
`html`
Check out this jsbin demo for a full demo.
jQuery doesn't copy all properties from the original event object to the event object provided in the event handler. You can find a list of copied and normalized properties on the jQuery API docs. To access any other original properties, use event.originalEvent.
As of version 16.4, React comes with first class support for pointer events. To use pointer events on unsupported browsers, you can include PEP before mounting your React application. You can also use the touch-action property on any JSX node:
` Mouse events and touch events are fundamentally different beasts in browsers today, and that makes it hard to write cross-platform apps. For example, a simple finger paint app needs plenty of work to behave correctly with mouse and touch: Current platforms that implement touch events also provide mouse events for backward compatibility; however, only a subset of mouse events are fired and the semantics are changed. - Mouse events are only fired after the touch sequence ends. Additionally, touch events are sent only to the element that received the These incompatibilities lead to applications having to listen to 2 sets of events, mouse on desktop and touch for mobile. This forked interaction experience is cumbersome and hard to maintain. Instead, there should exist a set of events that are normalized such that they behave exactly the same, no matter the source: touch, mouse, stylus, skull implant, etc. To do this right, this normalized event system needs to be available for all the web platform to use. Thus, Pointer Events! According to the spec, the Due to the difficult nature of polyfilling new CSS properties, this library uses a touch-action attribute instead. For PEP to work correctly, you will therefore need to include Touches will not generate events unless inside of an area that has a valid PEP does not currently polyfill the capturing phase for pointer events. PEP should work on IE 10+ and the latest versions of Chrome, Safari, Firefox, and Opera. In any browser implementing pointer events natively (detected by checking for If you want to build PEP yourself from source, you'll need to install Node.js and run the following commands: When the build completes, the generated files will be available in the NOTE: Running the demos requires building PEP.js
export function Pointable() {
return console.log(e)} />
}
`Why Pointer Events?
- Mouse events are not fired on elements without a event handler. One must be attached by default, or directly on the element with onclick.click
- events are not fired if the content of the page changes in a mousemove or mouseover event.click
- events are fired 300ms after the touch sequence ends.touchstart
- More information: Apple Developer Documentation.. This is fundamentally different than mouse events, which fire on the element that is under the mouse. To make them behave similarly, touch events need to be retargeted with document.elementFromPoint.touch-action="..."Polyfill Limitations
$3
touch-action CSS property controls whether an element will perform a "default action" such as scrolling, or receive a continuous stream of pointer events. attributes in your HTML that mirror any touch-action:... properties you have in your CSS.`
... ...
Run time changes involving the attribute are monitored using Mutation Observers for maximum flexibility.touch-action attribute defined. This is to maintain composition scrolling optimizations where possible.navigator.maxTouchPoints$3
navigator.maxTouchPoints
is not available in browsers that do not natively implement pointer events, PEP sets the value to 0, which is "the minimum number guaranteed to be recognized" as required by the specification.window.PointerEvent$3
), PEP won't do anything.`Building PEP
sh`Install all dependencies
npm installBuild PEP
npm run build