console.log(e)} />
}
```
## Why Pointer Events?
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.
- Mouse events are not fired on elements without a `click` 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.
- More information: [Apple Developer Documentation](http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html).
Additionally, touch events are sent only to the element that received the `touchstart`. 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`.
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!*
## Polyfill Limitations
### touch-action
According to the spec, the
[touch-action](http://www.w3.org/TR/pointerevents/#the-touch-action-css-property) CSS property controls whether an element will perform a "default action" such as scrolling, or receive a continuous stream of pointer events.
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 `touch-action="..."` attributes in your HTML that mirror any `touch-action:...` properties you have in your CSS.
```
...
...
```
Run time changes involving the `touch-action` attribute are monitored using Mutation Observers for maximum flexibility.
Touches will not generate events unless inside of an area that has a valid `touch-action` attribute defined. This is to maintain composition scrolling optimizations where possible.
### Capturing Phase
PEP does not currently polyfill the capturing phase for pointer events.
## navigator.maxTouchPoints
As the information necessary to populate [`navigator.maxTouchPoints`](https://www.w3.org/TR/pointerevents/#extensions-to-the-navigator-interface) 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.
### Browser Compatibility
PEP should work on IE 10+ and the latest versions of Chrome, Safari, Firefox, and Opera. In any [browser implementing pointer events natively](http://caniuse.com/#feat=pointer) (detected by checking for `window.PointerEvent`), PEP won't do anything.
## Building PEP
If you want to build PEP yourself from source, you'll need to install [Node.js](https://nodejs.org/en/download/) and run the following commands:
```sh
# Install all dependencies
npm install
# Build PEP
npm run build
```
When the build completes, the generated files will be available in the `dist/` directory.
*NOTE: Running the demos requires building PEP.*
---
_Source: https://npm.io/package/pepjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._