{"id":13658870,"url":"https://github.com/jquery-archive/PEP","last_synced_at":"2025-04-24T11:32:57.163Z","repository":{"id":4395134,"uuid":"5532217","full_name":"jquery-archive/PEP","owner":"jquery-archive","description":"Pointer Events Polyfill: a unified event system for the web platform","archived":true,"fork":false,"pushed_at":"2021-02-10T20:28:23.000Z","size":1491,"stargazers_count":1661,"open_issues_count":0,"forks_count":157,"subscribers_count":71,"default_branch":"master","last_synced_at":"2025-04-10T10:49:52.931Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.w3.org/TR/pointerevents/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jquery-archive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-08-23T20:49:02.000Z","updated_at":"2025-03-30T07:37:37.000Z","dependencies_parsed_at":"2022-08-06T16:15:30.270Z","dependency_job_id":null,"html_url":"https://github.com/jquery-archive/PEP","commit_stats":null,"previous_names":["jquery/pep"],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jquery-archive%2FPEP","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jquery-archive%2FPEP/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jquery-archive%2FPEP/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jquery-archive%2FPEP/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jquery-archive","download_url":"https://codeload.github.com/jquery-archive/PEP/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249138952,"owners_count":21218976,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T05:01:03.352Z","updated_at":"2025-04-24T11:32:56.610Z","avatar_url":"https://github.com/jquery-archive.png","language":"JavaScript","readme":"**PEP has now [entered emeritus status at the OpenJS Foundation](https://openjsf.org/blog/2021/02/10/pointer-events-polyfill-pep-enters-emeritus-status-at-the-openjs-foundation/). This repository is now archived.**\n\n# Pointer Events Polyfill - making pointer events usable today\n\n![PEP logo](pep-logo-shield.png)\n\nPEP 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](#why-pointer-events).\n\n## Project status\n\nPEP development ceased in 2018. A few minor maintenance patches have been pushed since then, and the latest version (0.5.3) has been published to [npm](https://www.npmjs.com/package/pepjs). However, native support for Pointer Events is relatively good in most browsers at this point - see [caniuse: Pointer Events](https://caniuse.com/pointer). This project is now archived.\n\n## Getting Started\n\n1. Place the PEP script in the document head\n  - `\u003cscript src=\"https://code.jquery.com/pep/0.4.3/pep.js\"\u003e\u003c/script\u003e`\n\n2. 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](http://www.w3.org/TR/pointerevents/#the-touch-action-css-property).\n\n3. Listen for the desired events\n  - `pointermove`: a pointer moves, similar to touchmove or mousemove.\n  - `pointerdown`: a pointer is activated, or a device button held.\n  - `pointerup`: a pointer is deactivated, or a device button released.\n  - `pointerover`: a pointer has moved onto an element.\n  - `pointerout`: a pointer is no longer on an element it once was.\n  - `pointerenter`: a pointer enters the bounding box of an element.\n  - `pointerleave`: a pointer leaves the bounding box of an element.\n  - `pointercancel`: a pointer will no longer generate events.\n\n4. As elements come and go, or have their `touch-action` attribute changed, they will send the proper set of pointer events.\n\n```html\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"utf-8\"\u003e\n  \u003ctitle\u003ePEP (Pointer Events Polyfill)\u003c/title\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width\"\u003e\n  \u003c!-- include PEP --\u003e\n  \u003cscript src=\"https://code.jquery.com/pep/0.4.3/pep.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cbutton id=\"b\" touch-action=\"none\"\u003eTest button!\u003c/button\u003e\n\u003cp\u003e\u003coutput id=\"o\"\u003e\u003c/output\u003e\u003c/p\u003e\n\u003cscript\u003e\ndocument.getElementById( \"b\" ).addEventListener( \"pointerdown\", function( e ) {\n  document.getElementById( \"o\" ).innerHTML = \"that was a \" +\n    e.pointerType + \" \" + e.type + \" on a \"+ e.target.nodeName;\n} );\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nSee also the [examples in the W3C Pointer Events Specification](http://www.w3.org/TR/pointerevents/#examples) and our own [samples for using PEP](http://jquery.github.io/PEP/).\n\n### Using PEP as a module\n\n```shell\nnpm install pepjs\n```\n\n```javascript\nimport 'pepjs'\n```\n\n### Using PEP with jQuery\n\nYou can use pointer events with jQuery and PEP:\n```html\n\u003cdiv id=\"canvas\" touch-action=\"none\"\u003e\u003c/div\u003e\n\u003cscript src=\"pep.dist.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"jquery.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n$(\"#canvas\").on(\"pointermove\", function(event) {\n  draw(event);\n});\n\u003c/script\u003e\n```\nCheck out [this jsbin demo](http://jsbin.com/bojumofowa/1/edit?html,css,js,output) for a full demo.\n\njQuery 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](http://api.jquery.com/category/events/event-object/). To access any other original properties, use `event.originalEvent`.\n\n### Using PEP with React\n\nAs of version [16.4](https://reactjs.org/blog/2018/05/23/react-v-16-4.html), 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:\n\n```js\nexport function Pointable() {\n  return \u003cdiv touch-action=\"none\" onPointerDown={(e) =\u003e console.log(e)} /\u003e \n}\n```\n\n## Why Pointer Events?\n\nMouse events and touch events are fundamentally different beasts in browsers today, and that makes it hard to write cross-platform apps.\n\nFor example, a simple finger paint app needs plenty of work to behave correctly with mouse and touch:\n\nCurrent 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.\n\n- Mouse events are only fired after the touch sequence ends.\n- 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`.\n- `click` events are not fired if the content of the page changes in a `mousemove` or `mouseover` event.\n- `click` events are fired 300ms after the touch sequence ends.\n- More information: [Apple Developer Documentation](http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html).\n\nAdditionally, 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`.\n\nThese incompatibilities lead to applications having to listen to 2 sets of events, mouse on desktop and touch for mobile.\n\n**This forked interaction experience is cumbersome and hard to maintain.**\n\nInstead, 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.\n\n*Thus, Pointer Events!*\n\n## Polyfill Limitations\n\n### touch-action\n\nAccording to the spec, the\n[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.\n\nDue 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.\n\n```\n\u003cstyle\u003e\n  div#foo { touch-action: none; }\n\u003c/style\u003e\n...\n\u003cdiv id=\"foo\" touch-action=\"none\"\u003e ... \u003c/div\u003e\n```\nRun time changes involving the `touch-action` attribute are monitored using Mutation Observers for maximum flexibility.\n\nTouches 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.\n\n### Capturing Phase\n\nPEP does not currently polyfill the capturing phase for pointer events.\n\n## navigator.maxTouchPoints\n\nAs 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.\n\n### Browser Compatibility\n\nPEP 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.\n\n## Building PEP\n\nIf 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:\n\n```sh\n# Install all dependencies\nnpm install\n\n# Build PEP\nnpm run build\n```\n\nWhen the build completes, the generated files will be available in the `dist/` directory.\n\n*NOTE: Running the demos requires building PEP.*\n","funding_links":[],"categories":["JavaScript","others"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjquery-archive%2FPEP","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjquery-archive%2FPEP","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjquery-archive%2FPEP/lists"}