{"id":19533953,"url":"https://github.com/rafgraph/event-from","last_synced_at":"2025-04-26T14:34:33.238Z","repository":{"id":66154993,"uuid":"305770045","full_name":"rafgraph/event-from","owner":"rafgraph","description":"Determine if a browser event was caused by mouse, touch or key input.","archived":false,"fork":false,"pushed_at":"2021-07-09T17:05:29.000Z","size":10045,"stargazers_count":21,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-21T16:39:30.533Z","etag":null,"topics":["browser-events","dom-events","event","focus","touch"],"latest_commit_sha":null,"homepage":"https://event-from.rafgraph.dev","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/rafgraph.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-10-20T16:32:42.000Z","updated_at":"2023-07-27T06:01:17.000Z","dependencies_parsed_at":"2023-04-20T11:58:25.193Z","dependency_job_id":null,"html_url":"https://github.com/rafgraph/event-from","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafgraph%2Fevent-from","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafgraph%2Fevent-from/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafgraph%2Fevent-from/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafgraph%2Fevent-from/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rafgraph","download_url":"https://codeload.github.com/rafgraph/event-from/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251001259,"owners_count":21520916,"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":["browser-events","dom-events","event","focus","touch"],"created_at":"2024-11-11T02:11:19.345Z","updated_at":"2025-04-26T14:34:32.816Z","avatar_url":"https://github.com/rafgraph.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Event From\n\n[![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/event-from?color=purple)](https://bundlephobia.com/result?p=event-from) ![npm type definitions](https://img.shields.io/npm/types/event-from?color=blue)\n\nDetermine if a browser event was caused by `mouse`, `touch`, or `key` input. Can be used to:\n\n- Ignore `mouse` events caused by `touch` input.\n- Determine if `focus` was initiated from the keyboard (to know when to add focus styles).\n- Determine if a `click` event was from `mouse`, `touch`, or `key` input.\n- And anything else where knowing the type of user interaction that generated the event is helpful.\n- If you're using React you may be interested in [React Interactive](https://github.com/rafgraph/react-interactive), which uses Event From under the hood.\n\n---\n\n### [Live demo app for Event From](https://event-from.rafgraph.dev)\n\nCode is in the [`/demo`](/demo) folder.\n\n---\n\n```\nnpm install --save event-from\n```\n\n```js\nimport { eventFrom } from 'event-from';\n\nconst handleEvent = (event) =\u003e {\n  // call eventFrom in the event handler and pass in the event\n  // eventFrom will return 1 of 3 strings: 'mouse' | 'touch' | 'key'\n  const inputType = eventFrom(event);\n  // ...your logic using inputType\n};\n```\n\n---\n\n### Ignore `mouse` events caused by `touch` input\n\n\u003e Note that a touch interaction will fire Touch Events as the interaction is in progress (touch on the screen), and will fire Mouse Events during a long press (extended touch on the screen), or after the touch interaction has finished (after the touch is removed from the screen) to support sites that only listen for Mouse Events.\n\n```js\nimport { eventFrom } from 'event-from';\n\nconst handleMouseEvent = (e) =\u003e {\n  // early return to ignore mouse events not from mouse input\n  if (eventFrom(e) !== 'mouse') return;\n\n  // code for handling mouse events from mouse input\n};\n\nelement.addEventListener('mouseenter', handleMouseEvent, false);\n```\n\n---\n\n### Determine if a `focus` event was from `key` input to add focus styles\n\n```js\nimport { eventFrom } from 'event-from';\n\nconst handleFocusEvent = (e) =\u003e {\n  if (eventFrom(e) === 'key') {\n    // add focus styles when focus is from keyboard input\n  }\n};\n\nelement.addEventListener('focus', handleFocusEvent, false);\n```\n\n---\n\n### Determine if a `click` event was from `mouse`, `touch`, or `key` input\n\n```js\nimport { eventFrom } from 'event-from';\n\nconst handleClickEvent = (e) =\u003e {\n  switch (eventFrom(e)) {\n    case 'mouse':\n      // click event from mouse\n      break;\n    case 'touch':\n      // click event from touch\n      break;\n    case 'key':\n      // click event from key\n      break;\n  }\n};\n\nelement.addEventListener('click', handleClickEvent, false);\n```\n\n---\n\n## `setEventFrom(value)`\n\n`value: 'mouse' | 'touch' | 'key'`\n\nTemporarily set the return value for `eventFrom(e)`. This is useful when manually generating events, for example calling `el.focus()` or `el.click()`, and you want `eventFrom(e)` to treat that event as occurring from a specific input.\n\n```js\nimport { eventFrom, setEventFrom } from 'event-from';\n\nconst handleFocusEvent = (e) =\u003e {\n  if (eventFrom(e) === 'key') {\n    // add focus styles when focus is from keyboard input\n  }\n};\n\nconst element = document.getElementById('focus-example');\n\nelement.addEventListener('focus', handleFocusEvent, false);\n\n// somewhere in your code where you want to call focus on the element\n// and have it be treated as an event from 'key' input,\n// now the call to eventFrom(e) in handleFocusEvent will return 'key'\nsetEventFrom('key');\nelement.focus();\n```\n\n---\n\n## How it works\n\nEvent From sets passive capture phase event listeners on the `document` and `window` and tracks the recent event history to know what input type is responsible for the event that's passed to `eventFrom(event)`.\n\nThe listeners that Event From sets are all low frequency event listeners (enter/leave/down/up/focus/etc). Event From does not set any high frequency listeners such as `move` or `scroll` listeners.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafgraph%2Fevent-from","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frafgraph%2Fevent-from","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafgraph%2Fevent-from/lists"}