{"id":22160418,"url":"https://github.com/rozek/svelte-touch-to-mouse","last_synced_at":"2026-03-17T20:33:30.934Z","repository":{"id":57375385,"uuid":"372202799","full_name":"rozek/svelte-touch-to-mouse","owner":"rozek","description":"maps touch events to mouse events (not only for Svelte)","archived":false,"fork":false,"pushed_at":"2022-07-29T09:06:06.000Z","size":85,"stargazers_count":4,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-03T02:04:50.397Z","etag":null,"topics":["mouse-emulation","mouse-events","touch-events"],"latest_commit_sha":null,"homepage":"","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/rozek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-30T11:59:57.000Z","updated_at":"2024-10-20T09:30:41.000Z","dependencies_parsed_at":"2022-09-07T13:40:13.623Z","dependency_job_id":null,"html_url":"https://github.com/rozek/svelte-touch-to-mouse","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rozek/svelte-touch-to-mouse","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-touch-to-mouse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-touch-to-mouse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-touch-to-mouse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-touch-to-mouse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rozek","download_url":"https://codeload.github.com/rozek/svelte-touch-to-mouse/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-touch-to-mouse/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267145512,"owners_count":24042650,"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","status":"online","status_checked_at":"2025-07-26T02:00:08.937Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["mouse-emulation","mouse-events","touch-events"],"created_at":"2024-12-02T04:07:46.937Z","updated_at":"2026-03-17T20:33:30.899Z","avatar_url":"https://github.com/rozek.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-touch-to-mouse #\n\nmaps touch events to mouse events (not only for Svelte)\n\n**NPM users**: please consider the [Github README](https://github.com/rozek/svelte-touch-to-mouse/blob/main/README.md) for the latest description of this package (as updating the docs would otherwise always require a new NPM package version)\n\n\u003e Note: this code generates events of type `mousemove`, `mousedown` and `mouseup` - it does _not_ (yet) generate `mouseenter`, `mouseleave`, `mouseover` or `mouseout` events. Additionally, `mousemove` events continue to fire even after the touchpoint has left the HTML element where the touch started\n\n\u003e Just a small note: if you like this module and plan to use it, consider \"starring\" this repository (you will find the \"Star\" button on the top right of this page), so that I know which of my repositories to take most care of.\n\n## Installation ##\n\n`svelte-touch-to-mouse` may be used as an ECMAScript module (ESM), a CommonJS or AMD module or from a global variable.\n\nYou may either install the package into your build environment using [NPM](https://docs.npmjs.com/) with the command\n\n```\nnpm install svelte-touch-to-mouse\n```\n\nor load the plain script file directly\n\n```html\n\u003cscript src=\"https://unpkg.com/svelte-touch-to-mouse\"\u003e\u003c/script\u003e\n```\n\n## Access ##\n\nHow to access the package depends on the type of module you prefer\n\n* ESM (or Svelte): `import mapTouchToMouseFor from 'svelte-touch-to-mouse'`\n* CommonJS: `const mapTouchToMouseFor = require('svelte-touch-to-mouse')`\n* AMD: `require(['svelte-touch-to-mouse'], (mapTouchToMouseFor) =\u003e {...})`\n\nAlternatively, you may access the global variable `mapTouchToMouseFor` directly.\n\n## Usage within Svelte ##\n\nFor Svelte, it is recommended to import the package in a module context. From then on, its exports may be used as usual:\n\n```html\n\u003cstyle\u003e\n  div {\n    -webkit-touch-callout:none;\n    -ms-touch-action:none; touch-action:none;\n  }\n\u003c/style\u003e\n\n\u003cscript context=\"module\"\u003e\n  import mapTouchToMouseFor from 'svelte-touch-to-mouse'\n\u003c/script\u003e\n\n\u003cscript\u003e\n  mapTouchToMouseFor('div')\n\u003c/script\u003e\n\n\u003cdiv\u003ejust as an example - works with other elements as well\u003c/div\u003e\n```\n\n## Usage as ECMAScript, CommonJS or AMD Module (or as a global Variable) ##\n\nLet's assume that you already \"required\" or \"imported\" (or simply loaded) the module according to your local environment. In that case, you may use it as follows:\n\n```javascript\nmapTouchToMouseFor('div')\n```\n\n## Examples ##\n\nThis module was initially developed in order to make [svelte-agnostic-draggable](https://github.com/rozek/svelte-agnostic-draggable) \"mobile capable\" - for that reason, please, look there for some meaningful examples.\n\n## Background Information ##\n\nThere still exist numerous JavaScript libraries and frameworks dealing with `MouseEvent`s only - ignoring the `TouchEvent`s used on mobile devices. This simple module maps `TouchEvent`s to corresponding `MouseEvent`s and, thus, allows such libraries to be used on mobile devices as well.\n\nIt does so by mapping events for certain HTML elements only in order to avoid undesired side effects on other elements.\n\n`mapTouchToMouseFor(\u003ccss-selector\u003e)`\n\nmaps `TouchEvent`s for all HTML elements matching the given `\u003ccss-selector\u003e`. `mapTouchToMouseFor` may well be called multiple times (for different selectors) - or (in the extreme case) once with selector `*` to map events for all HTML elements\n\n**Important Note**\n\nPresumably, you also want to apply the following CSS settings to all HTML elements affected by `mapTouchToMouseFor`\n\n```\n-webkit-touch-callout:none;\n-ms-touch-action:none; touch-action:none;\n```\n\nfor the `MouseEvent` consumers to work as expected.\n\n## Build Instructions ##\n\nYou may easily build this package yourself.\n\nJust install [NPM](https://docs.npmjs.com/) according to the instructions for your platform and follow these steps:\n\n1. either clone this repository using [git](https://git-scm.com/) or [download a ZIP archive](https://github.com/rozek/svelte-touch-to-mouse/archive/refs/heads/main.zip) with its contents to your disk and unpack it there \n2. open a shell and navigate to the root directory of this repository\n3. run `npm install` in order to install the complete build environment\n4. execute `npm run build` to create a new build\n\nYou may also look into the author's [build-configuration-study](https://github.com/rozek/build-configuration-study) for a general description of his build environment.\n\n## License ##\n\n[MIT License](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fsvelte-touch-to-mouse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frozek%2Fsvelte-touch-to-mouse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fsvelte-touch-to-mouse/lists"}