{"id":16117907,"url":"https://github.com/wessberg/pointer-events","last_synced_at":"2025-03-17T18:30:39.667Z","repository":{"id":57169429,"uuid":"143984308","full_name":"wessberg/pointer-events","owner":"wessberg","description":"A Level 2 spec-compliant Pointer Events polyfill with first-class Shadow DOM support","archived":false,"fork":false,"pushed_at":"2019-02-09T11:05:16.000Z","size":241,"stargazers_count":17,"open_issues_count":2,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-28T03:22:34.310Z","etag":null,"topics":["level-2","pointer-events","pointerevent","pointerevents","polyfill","polyfill-app","shim"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wessberg.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-08T08:30:48.000Z","updated_at":"2024-04-23T07:34:24.000Z","dependencies_parsed_at":"2022-09-04T10:20:11.897Z","dependency_job_id":null,"html_url":"https://github.com/wessberg/pointer-events","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wessberg%2Fpointer-events","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wessberg%2Fpointer-events/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wessberg%2Fpointer-events/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wessberg%2Fpointer-events/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wessberg","download_url":"https://codeload.github.com/wessberg/pointer-events/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243878439,"owners_count":20362432,"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":["level-2","pointer-events","pointerevent","pointerevents","polyfill","polyfill-app","shim"],"created_at":"2024-10-09T20:47:41.386Z","updated_at":"2025-03-17T18:30:39.181Z","avatar_url":"https://github.com/wessberg.png","language":"TypeScript","readme":"\u003c!-- SHADOW_SECTION_LOGO_START --\u003e\n\n\u003cdiv\u003e\u003cimg alt=\"Logo\" src=\"https://raw.githubusercontent.com/wessberg/pointer-events/master/documentation/asset/logo.png\" height=\"250\"   /\u003e\u003c/div\u003e\n\n\u003c!-- SHADOW_SECTION_LOGO_END --\u003e\n\n\u003c!-- SHADOW_SECTION_DESCRIPTION_SHORT_START --\u003e\n\n\u003e A Level 2 spec-compliant Pointer Events polyfill with first-class Shadow DOM support\n\n\u003c!-- SHADOW_SECTION_DESCRIPTION_SHORT_END --\u003e\n\n\u003c!-- SHADOW_SECTION_BADGES_START --\u003e\n\n\u003ca href=\"https://npmcharts.com/compare/%40wessberg%2Fpointer-events?minimal=true\"\u003e\u003cimg alt=\"Downloads per month\" src=\"https://img.shields.io/npm/dm/%40wessberg%2Fpointer-events.svg\"    /\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/%40wessberg%2Fpointer-events\"\u003e\u003cimg alt=\"NPM version\" src=\"https://badge.fury.io/js/%40wessberg%2Fpointer-events.svg\"    /\u003e\u003c/a\u003e\n\u003ca href=\"https://david-dm.org/wessberg/pointer-events\"\u003e\u003cimg alt=\"Dependencies\" src=\"https://img.shields.io/david/wessberg%2Fpointer-events.svg\"    /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/wessberg/pointer-events/graphs/contributors\"\u003e\u003cimg alt=\"Contributors\" src=\"https://img.shields.io/github/contributors/wessberg%2Fpointer-events.svg\"    /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/prettier/prettier\"\u003e\u003cimg alt=\"code style: prettier\" src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square\"    /\u003e\u003c/a\u003e\n\u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/badge/License-MIT-yellow.svg\"    /\u003e\u003c/a\u003e\n\u003ca href=\"https://www.patreon.com/bePatron?u=11315442\"\u003e\u003cimg alt=\"Support on Patreon\" src=\"https://img.shields.io/badge/patreon-donate-green.svg\"    /\u003e\u003c/a\u003e\n\n\u003c!-- SHADOW_SECTION_BADGES_END --\u003e\n\n\u003c!-- SHADOW_SECTION_DESCRIPTION_LONG_START --\u003e\n\n## Description\n\n\u003c!-- SHADOW_SECTION_DESCRIPTION_LONG_END --\u003e\n\nThis polyfill brings Level 2 [Pointer Events](https://www.w3.org/TR/pointerevents/) to all browsers!\nThe Pointer Events specification provides a unified model for handling input from a _pointer_ such as a mouse, a touch, and a pen.\n\nGone are the complexities of handling both `MouseEvent`s and `TouchEvent`s and juggling the differences between them.\nThe primary design goals of this polyfill are to be as spec-compliant as possible, and to support modern web technologies such as Shadow DOM.\n\n\u003c!-- SHADOW_SECTION_FEATURES_START --\u003e\n\n### Features\n\n\u003c!-- SHADOW_SECTION_FEATURES_END --\u003e\n\n- Spec-compliant\n- Shadow DOM support\n- Performant\n- Feature-complete\n\n\u003c!-- SHADOW_SECTION_FEATURE_IMAGE_START --\u003e\n\n\u003c!-- SHADOW_SECTION_FEATURE_IMAGE_END --\u003e\n\n\u003c!-- SHADOW_SECTION_TOC_START --\u003e\n\n## Table of Contents\n\n- [Description](#description)\n  - [Features](#features)\n- [Table of Contents](#table-of-contents)\n- [Install](#install)\n  - [NPM](#npm)\n  - [Yarn](#yarn)\n- [Usage](#usage)\n  - [`touch-action` support](#touch-action-support)\n- [Dependencies \u0026 Browser support](#dependencies--browser-support)\n- [Contributing](#contributing)\n- [Maintainers](#maintainers)\n- [Backers](#backers)\n  - [Patreon](#patreon)\n- [FAQ](#faq)\n  - [There are several polyfills for Pointer events already. Why another one?](#there-are-several-polyfills-for-pointer-events-already-why-another-one)\n  - [Are there any known quirks?](#are-there-any-known-quirks)\n- [License](#license)\n\n\u003c!-- SHADOW_SECTION_TOC_END --\u003e\n\n\u003c!-- SHADOW_SECTION_INSTALL_START --\u003e\n\n## Install\n\n### NPM\n\n```\n$ npm install @wessberg/pointer-events\n```\n\n### Yarn\n\n```\n$ yarn add @wessberg/pointer-events\n```\n\n\u003c!-- SHADOW_SECTION_INSTALL_END --\u003e\n\n\u003c!-- SHADOW_SECTION_USAGE_START --\u003e\n\n## Usage\n\n\u003c!-- SHADOW_SECTION_USAGE_END --\u003e\n\nTo use the Polyfill, simply import it:\n\n```typescript\nimport \"@wessberg/pointer-events\";\n```\n\nHowever, it is strongly suggested that you only include the polyfill for browsers that doesn't already support Pointer Events.\nOne way to do so is with an async import:\n\n```typescript\nif (!(\"PointerEvent\" in window)) {\n\tawait import(\"@wessberg/pointer-events\");\n}\n```\n\nAlternatively, you can use [Polyfill.app](https://github.com/wessberg/Polyfiller) which uses this polyfill and takes care of only loading the polyfill if needed as well as adding the language features that the polyfill depends on (See [dependencies](#dependencies--browser-support)).\n\n### `touch-action` support\n\nThis polyfill supports the following [Pointer Events (Level 2)](https://www.w3.org/TR/pointerevents/) `touch-action` values, as well as those\ndefined in the latest [Draft Community Report](https://w3c.github.io/pointerevents/extension.html#extensions-to-the-pointerevent-interface):\n\n- `none`\n- `pan-x`\n- `pan-y`\n- `pan-left`\n- `pan-right`\n- `pan-up`\n- `pan-down`\n- `auto`\n- `manipulation` (will be treated the same ast `auto`)\n\nUpon pointer contact, the polyfill will walk up the DOM tree from the target element and look for elements that has either:\n\n- A style attribute including a `touch-action` property.\n- An element with a `touch-action` attribute.\n- Or, an element with a `CSSStyleDeclaration` with a `touchAction` property.\n\nThis means that either of the following approaches will work:\n\n```html\n\u003c!-- Works just fine when given in the 'style' attribute --\u003e\n\u003cdiv style=\"touch-action: pan-y\"\u003e\u003c/div\u003e\n\u003c!-- Works just fine when given as an attribute of the name 'touch-action' --\u003e\n\u003cdiv touch-action=\"pan-y\"\u003e\u003c/div\u003e\n```\n\n```typescript\n// Works jut fine when given as a style property\nelement.style.touchAction = \"pan-y\";\n```\n\nSee [this section](#are-there-any-known-quirks) for information about why `touch-action` values provided in stylesheets won't be discovered by the polyfill.\n\n## Dependencies \u0026 Browser support\n\nThis polyfill is distributed in ES3-compatible syntax, but is using some modern APIs and language features which must be available:\n\n- `EventTarget`\n- `Set`\n- `Map`\n- `Object.defineProperty`\n- `Object.defineProperties`\n- `Array.from`\n- `Array.prototype.some`\n- `Array.prototype.every`\n- `String.prototype.includes`\n- Constructable `Event`s\n- `EventTarget.prototype.addEventListener`\n- `EventTarget.prototype.removeEventListener`\n- `EventTarget.prototype.dispatchEvent`\n- `Document.prototype.elementFromPoint`\n- `window.getComputedStyle`\n- `ShadowRoot.prototype.elementFromPoint`\\*\n\n_\\*: This is only relevant if you're using Shadow DOM (in which case a Shadow DOM polyfill will most likely polyfill the prototype method)._\n\nFor by far the most browsers, these features will already be natively available.\nGenerally, I would highly recommend using something like [Polyfill.app](https://github.com/wessberg/Polyfiller) which takes care of this stuff automatically.\n\n\u003c!-- SHADOW_SECTION_CONTRIBUTING_START --\u003e\n\n## Contributing\n\nDo you want to contribute? Awesome! Please follow [these recommendations](./CONTRIBUTING.md).\n\n\u003c!-- SHADOW_SECTION_CONTRIBUTING_END --\u003e\n\n\u003c!-- SHADOW_SECTION_MAINTAINERS_START --\u003e\n\n## Maintainers\n\n| \u003cimg alt=\"Frederik Wessberg\" src=\"https://avatars2.githubusercontent.com/u/20454213?s=460\u0026v=4\" height=\"70\"   /\u003e                   |\n| --------------------------------------------------------------------------------------------------------------------------------- |\n| [Frederik Wessberg](mailto:frederikwessberg@hotmail.com)\u003cbr\u003e[@FredWessberg](https://twitter.com/FredWessberg)\u003cbr\u003e_Lead Developer_ |\n\n\u003c!-- SHADOW_SECTION_MAINTAINERS_END --\u003e\n\n\u003c!-- SHADOW_SECTION_BACKERS_START --\u003e\n\n## Backers\n\n### Patreon\n\n[Become a backer](https://www.patreon.com/bePatron?u=11315442) and get your name, avatar, and Twitter handle listed here.\n\n\u003ca href=\"https://www.patreon.com/bePatron?u=11315442\"\u003e\u003cimg alt=\"Backers on Patreon\" src=\"https://patreon-badge.herokuapp.com/11315442.png\"  width=\"500\"  /\u003e\u003c/a\u003e\n\n\u003c!-- SHADOW_SECTION_BACKERS_END --\u003e\n\n\u003c!-- SHADOW_SECTION_FAQ_START --\u003e\n\n## FAQ\n\n\u003c!-- SHADOW_SECTION_FAQ_END --\u003e\n\n### There are several polyfills for Pointer events already. Why another one?\n\nYes, there are several, including [PEP](https://github.com/jquery/PEP) and [Points](https://github.com/Rich-Harris/Points).\nThis polyfill was made because neither were built with Shadow DOM (v1) support in mind.\nFor example, _Points_ assumes a single document-level root and relies on `document.elementFromPoint` which will never reach within Shadow roots.\nAnd, _PEP_ relies on _/deep/_ selectors, something that has been removed from the platform.\nI found that none of the existing polyfills I attempted _\"just worked\"_ and decided to try it out for myself.\nThere may well be parts of this polyfill that is less aligned with the spec than other polyfills, and such issues will be ironed out over time.\n\n### Are there any known quirks?\n\nFor now, just one: The `touch-action` CSS property needs to be provided from either inline styles or an attribute of the same name.\nThis is because [polyfilling CSS is hard and really bad for performance](https://philipwalton.com/articles/the-dark-side-of-polyfilling-css/).\n\n\u003c!-- SHADOW_SECTION_LICENSE_START --\u003e\n\n## License\n\nMIT © [Frederik Wessberg](mailto:frederikwessberg@hotmail.com) ([@FredWessberg](https://twitter.com/FredWessberg)) ([Website](https://github.com/wessberg))\n\n\u003c!-- SHADOW_SECTION_LICENSE_END --\u003e\n","funding_links":["https://www.patreon.com/bePatron?u=11315442"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwessberg%2Fpointer-events","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwessberg%2Fpointer-events","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwessberg%2Fpointer-events/lists"}