{"id":21299598,"url":"https://github.com/mutsuntsai/clickout-event","last_synced_at":"2025-06-26T14:33:23.594Z","repository":{"id":55561586,"uuid":"289622837","full_name":"MuTsunTsai/clickout-event","owner":"MuTsunTsai","description":"Provides universal support for clickout and other similar events to webpages.","archived":false,"fork":false,"pushed_at":"2025-02-16T02:17:50.000Z","size":226,"stargazers_count":18,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-09T08:50:15.450Z","etag":null,"topics":["click","clickout","event","outside"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/clickout-event","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/MuTsunTsai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-23T05:32:41.000Z","updated_at":"2025-04-11T20:01:33.000Z","dependencies_parsed_at":"2024-06-18T22:51:06.809Z","dependency_job_id":"10341d24-e65c-4fe7-b78d-9f6cb626b92f","html_url":"https://github.com/MuTsunTsai/clickout-event","commit_stats":{"total_commits":15,"total_committers":2,"mean_commits":7.5,"dds":0.06666666666666665,"last_synced_commit":"c5117e566f433c0ff51f3af2df1024a94666b9d6"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/MuTsunTsai/clickout-event","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MuTsunTsai%2Fclickout-event","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MuTsunTsai%2Fclickout-event/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MuTsunTsai%2Fclickout-event/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MuTsunTsai%2Fclickout-event/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MuTsunTsai","download_url":"https://codeload.github.com/MuTsunTsai/clickout-event/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MuTsunTsai%2Fclickout-event/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262085198,"owners_count":23256389,"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":["click","clickout","event","outside"],"created_at":"2024-11-21T15:04:18.117Z","updated_at":"2025-06-26T14:33:23.554Z","avatar_url":"https://github.com/MuTsunTsai.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Clickout-Event\n\n\u003e Provides universal support for `clickout` and other similar events to any front-end frameworks.\n\n[![npm version](https://img.shields.io/npm/v/clickout-event.svg?logo=npm)](https://www.npmjs.com/package/clickout-event)\n![npm downloads](https://img.shields.io/npm/dt/clickout-event?logo=npm)\n[![GitHub package version](https://img.shields.io/github/package-json/v/MuTsunTsai/clickout-event.svg?logo=github\u0026label=Github)](https://github.com/MuTsunTsai/clickout-event)\n![license](https://img.shields.io/npm/l/clickout-event.svg)\n\n\nThere are many packages that are designed to capture and handle the\n\"click outside\" event of an element. Some of them target vanilla JavaScript,\nwhile some others target specific front-end framework, possibly specific version.\nFront-end designers in the past had to look for the right package that works\nfor their particular scenario.\n\nLook no further! Introducing Clickout-Event,\na package that provides universal support for `clickout` and other similar events.\nIt works in all scenarios: plain HTML `onclickout` attributes,\n`.addEventListener('clickout')` of vanilla JavaScript,\n`.on('clickout')` of jQuery, `v-on:clickout` directives of Vue.js, you name it. \nAs long as a front-end framework internally uses `addEventListener` to handle events,\nClickout-Event works for it.\n\n## License\n\nMIT License\n\n## Requirement\n\nIn order to fully implement all native event behaviors,\nClickout-Event uses the [mutation observer API](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver),\nso it will not work directly for legacy browsers.\nYou may try using polyfills to make it work,\nbut I haven't tested those yet.\n\n## Install (with module)\n\nYou can get Clickout-Event as an NPM package by running:\n```bash\nnpm install clickout-event --save\n```\nThen add one of the following lines to your entry script:\n\n```js\nrequire('clickout-event');\n// or\nimport 'clickout-event';\n```\n\nAnd watch the magic happen.\n\n## Install (without module)\n\nSimply download [`clickout-event.js`](https://github.com/MuTsunTsai/clickout-event/raw/master/dist/clickout-event.js).\nThen all you need to do is add the script tag anywhere (as long as it is before any calling of the `addEventListener` method, such as the beginning of the `\u003chead\u003e` section) in your HTML file:\n\n```html\n\u003cscript src=\"clickout-event.js\"\u003e\u003c/script\u003e\n```\n\n## API\n\nClickout-Event provides the corresponding \"out-events\" for the following events: `click`, `dblclick`, `mousedown`, `mouseup`, `touchstart`, `touchend`, `pointerdown` and `pointerup`. The corresponding events are then called `clickout`, `dblclickout` etc. You can then use them the same way you use any other events; see examples below.\n\nNote that pointer events is not supported in Safari.\n\nWith each out-event, you can use `event.relatedTarget` to find out exactly which element fires the original event (that is, the element being clicked etc.).\n\n## Usage\n\n### HTML inline attribute\n\n```html\n\u003cdiv onclickout=\"console.log('clickout detected')\"\u003e...\u003c/div\u003e\n```\n\n### Vanilla JavaScript\n\n```js\ndocument.getElementById('myId').addEventListener('clickout', myListener);\n```\n\n### [jQuery](https://jquery.com/)\n\n```js\n$('#myId').on('clickout', myListener);\n```\n\n### [Vue.js](https://vuejs.org/)\n\n```html\n\u003cdiv v-on:clickout=\"open=false\"\u003e...\u003c/div\u003e\n```\n\n### [Angular](https://angular.io/)\n\n```html\n\u003cdiv (clickout)=\"close()\"\u003e...\u003c/div\u003e\n```\n\n### Other frameworks\n\nSome frameworks (such as [React](https://reactjs.org/) and [Blazor](https://blazor.net/))\nhave a fixed list of events that are supported by their event attribute syntax,\nso you cannot directly use their event attributes with out-events\n(or with any custom events for that matter) in their templates.\nStill, you can create custom components in these frameworks and use the vanilla\n`addEventListener()` method to register event listener.\n\n## Details\n\n### Event propagation\n\nYou can have nested elements using the out-events. In that case,\nunlike regular events, out-events fire in the top-down ordering;\nthat is, the parent element will fire the event first,\nand then will the child elements.\nSimilarly, when calling `event.stopPropagation()`\n(or, for example, using `v-on:clickout.stop` in Vue.js) on the out-events,\nit will be the parent element stopping the child element from firing the event.\n\nBy design, even if the propagation of the original event is stopped,\nthe corresponding out-event will still fire regardlessly.\n\n### Dynamic elements\n\nFeel free to add or remove elements dynamically!\nClickout-Event monitors changes to the document,\nand will ensure the out-events work no matter which dynamic\nfront-end framework you're using.\n\n### Content Security Policy (CSP)\n\nWhen using inline event attributes,\nClickout-Event is subject to the same CSP restriction as any other events;\nthat is, `'unsafe-inline'` must be allowed. Now Clickout-Event uses\nnative mechanisms instead of eval-like methods to parse the attribute,\nso you don't need to allow `'unsafe-eval'`.\n\n### Caveat\n\nSince out-events are synthetic events,\nthey are untrusted (that is, `event.isTrusted == false`) by nature,\nand your event listener is not supposed to reject the event because of this.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmutsuntsai%2Fclickout-event","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmutsuntsai%2Fclickout-event","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmutsuntsai%2Fclickout-event/lists"}