{"id":13561823,"url":"https://github.com/mpizenberg/elm-pointer-events","last_synced_at":"2025-07-23T04:34:18.281Z","repository":{"id":45837774,"uuid":"107097045","full_name":"mpizenberg/elm-pointer-events","owner":"mpizenberg","description":"Mouse, Touch, Pointer, Wheel and Drag events in elm","archived":false,"fork":false,"pushed_at":"2023-06-21T06:48:08.000Z","size":135,"stargazers_count":72,"open_issues_count":9,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-17T23:03:36.029Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://package.elm-lang.org/packages/mpizenberg/elm-pointer-events/latest","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mpizenberg.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2017-10-16T08:05:15.000Z","updated_at":"2025-06-22T17:34:28.000Z","dependencies_parsed_at":"2024-01-14T03:38:55.501Z","dependency_job_id":"6dcd2b03-5e3e-4077-a375-24315353797d","html_url":"https://github.com/mpizenberg/elm-pointer-events","commit_stats":{"total_commits":123,"total_committers":4,"mean_commits":30.75,"dds":0.03252032520325199,"last_synced_commit":"f11c141fed3fd63160eec09ffca07a5a7d686cce"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/mpizenberg/elm-pointer-events","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpizenberg%2Felm-pointer-events","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpizenberg%2Felm-pointer-events/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpizenberg%2Felm-pointer-events/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpizenberg%2Felm-pointer-events/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mpizenberg","download_url":"https://codeload.github.com/mpizenberg/elm-pointer-events/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpizenberg%2Felm-pointer-events/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266618842,"owners_count":23957273,"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-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":[],"created_at":"2024-08-01T13:01:01.701Z","updated_at":"2025-07-23T04:34:18.254Z","avatar_url":"https://github.com/mpizenberg.png","language":"Elm","readme":"# elm-pointer-events\n\n[![][badge-license]][license]\n[![][badge-doc]][doc]\n\n[badge-doc]: https://img.shields.io/badge/documentation-latest-yellow.svg?style=flat-square\n[doc]: http://package.elm-lang.org/packages/mpizenberg/elm-pointer-events/latest\n[badge-license]: https://img.shields.io/badge/license-MPL--2.0-blue.svg?style=flat-square\n[license]: https://www.mozilla.org/en-US/MPL/2.0/\n\n\u003e If upgrading from [elm-mouse-events] or [elm-touch-events],\n\u003e please read the [upgrade notes][upgrade].\n\u003e Otherwise, if upgrading from elm-pointer-events 2.0.0,\n\u003e reading the [CHANGELOG][changelog] should be enough.\n\n[elm-mouse-events]: https://github.com/mpizenberg/elm-mouse-events\n[elm-touch-events]: https://github.com/mpizenberg/elm-touch-events\n[upgrade]: https://github.com/mpizenberg/elm-pointer-events/blob/master/upgrade.md\n[changelog]: https://github.com/mpizenberg/elm-pointer-events/blob/master/CHANGELOG.md\n\n```elm\nimport Html.Events.Extra.Pointer as Pointer\n-- ... example usage\ndiv [ Pointer.onDown (\\event -\u003e PointerDownMsg event.pointer.offsetPos) ] [ text \"click here\" ]\n```\n\nThis package aims at handling all kinds of pointer events in elm.\nTo be more specific, this means:\n\n- [`MouseEvent`][mouse-events]: standard mouse events\n- [`WheelEvent`][wheel-events]: standard wheel events\n- [`DragEvent`][drag-events]: HTML5 drag events\n- [`TouchEvent`][touch-events]: standard touch events\n- [`PointerEvent`][pointer-events]: new pointer events\n\nIf you are looking for only one standard kind of interaction (mouse or touch),\nI recommend that you use the `Mouse` or `Touch` modules.\nIf however, you are designing a multi-device (desktop/tablet/mobile/...) experience,\nI recommend that you use the `Pointer` module.\n\nPointer events are a unified interface for similar input devices\n(mouse, pen, touch, ...).\nSince maintaining both mouse and touch events for compatibility\nis really cumbersome, using a unified pointer events interface\nis a relief.\n\nBeware though, that the pointer API is not well supported by all browsers.\nFirefox \u003c 59 and Safari do not natively support pointer events.\nSo I strongly recommend to use this package in pair with the [elm-pep polyfill][elm-pep]\nfor compatibility with major browsers.\n\n[mouse-events]: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent\n[wheel-events]: https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent\n[drag-events]: https://developer.mozilla.org/en-US/docs/Web/API/DragEvent\n[touch-events]: https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent\n[pointer-events]: https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent\n[elm-pep]: https://github.com/mpizenberg/elm-pep\n\n## Usage\n\n### Mouse and Pointer\n\nThe `Mouse` and `Pointer` modules have very similar API\nso I will use `Mouse` as an example.\nLet's say you want the coordinates of a mouse down event relative to the DOM\nelement that triggered it.\nIn JavaScript, these are provided by the [`offsetX` and `offsetY` properties][offsetx]\nof the mouse event.\nUsing this module, these are similarly provided by the `offsetPos` attribute\nof a mouse `Event`:\n\n```elm\nimport Html.Events.Extra.Mouse as Mouse\n\n-- ...\n\ntype Msg\n    = MouseDownAt ( Float, Float )\n\nview =\n    div\n        [Mouse.onDown (\\event -\u003e MouseDownAt event.offsetPos)]\n        [text \"click here\"]\n```\n\nIf you are using the `Pointer` module,\nit is recommended that you deactivate `touch-action`\nto disable browsers scroll/pinch/... touch behaviors.\n\nAlso, if you are designing some kind of drawing application,\nyou want to be able to keep track of a pointer that leave the\ndrawing area to know if the pointer went up.\nThis is possible using what is called [pointer capture][pointer-capture].\nBut requires the use of ports. Look at `examples/Pointer/`\nif you are interested in how to do this.\n\n```elm\ndiv\n    [ Pointer.onDown ...\n    , Pointer.onMove ...\n    , Pointer.onUp ...\n\n    -- no touch-action\n    , Html.Attributes.style \"touch-action\" \"none\"\n    ]\n    [ -- the drawing area\n    ]\n```\n\n[offsetx]: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX\n[pointer-capture]: https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture\n\n### Touch\n\nMulti-touch interactions can be managed using the `Touch` module.\nIn case you only want to handle single touch interactions,\nyou could do something like below:\n\n```elm\nimport Html.Events.Extra.Touch as Touch\n\n-- ...\n\ntype Msg\n    = StartAt ( Float, Float )\n    | MoveAt ( Float, Float )\n    | EndAt ( Float, Float )\n\nview =\n    div\n        [ Touch.onStart (StartAt \u003c\u003c touchCoordinates)\n        , Touch.onMove (MoveAt \u003c\u003c touchCoordinates)\n        , Touch.onEnd (EndAt \u003c\u003c touchCoordinates)\n        ]\n        [text \"touch here\"]\n\ntouchCoordinates : Touch.Event -\u003e ( Float, Float )\ntouchCoordinates touchEvent =\n    List.head touchEvent.changedTouches\n        |\u003e Maybe.map .clientPos\n        |\u003e Maybe.withDefault ( 0, 0 )\n```\n\n### Wheel\n\nYou can manage `Wheel` events with the corresponding module.\nSince it is an extension to the `Mouse` module all mouse inherited properties\nare also available in the attribute `mouseEvent`.\n\nTo simply check for wheel rolling up or down you could do something like below:\n\n```elm\nimport Html.Events.Extra.Wheel as Wheel\n\n-- ...\n\ntype Msg\n    = Scrolling Float\n\nview =\n    div\n        [Wheel.onWheel (\\event -\u003e Scrolling event.deltaY)]\n        [text \"scroll here\"]\n```\n\n### Drag\n\nThe API presented by this package is slightly opinionated,\nto mitigate most errors induced by the complicated HTML5 drag events.\nThis API is organized around two use cases:\n\n1. Dropping files from OS\n2. Drag and drop of DOM elements\n\nFor dropping files, everything can be done purely in elm so the API reflects that.\nFor drag and drop however some events require JavaScript function calls.\nConsequently it requires the use of ports.\nTwo files, `DragPorts.js` and `Ports.elm` are provided in the source code\nof this repo to help setup things.\n\nMore info is available in the module documentation.\nOne example for each use case is present in the `examples/` directory.\n\n## Examples\n\nMinimalist working examples are available for each module in the `examples/` directory.\nTo test one example, `cd` into one of them and compile the elm file with the command:\n\n```shell\nelm make Main.elm --output Main.js\n```\n\nThen use any static http server like:\n\n```shell\n$ python3 -m http.server 8888\n```\n\nAnd open your browser at localhost:8888\nto load the `index.html` page.\n\n## Want to contribute?\n\nIf you are interested in contributing in any way\n(feedback, bug report, implementation of new functionality, ...)\ndon't hesitate to reach out on slack (user @mattpiz)\nand/or open an issue.\nDiscussion is the best way to start any contribution.\n\n## Documentation\n\n[![][badge-doc]][doc]\n\nThe package documentation is available on the [elm package website][doc].\n\n## License\n\n[![][badge-license]][license]\n\nThis Source Code Form is subject to the terms of the Mozilla Public License,v. 2.0.\nIf a copy of the MPL was not distributed with this file,\nYou can obtain one at https://mozilla.org/MPL/2.0/.\n\n## Contributors\n\n- Matthieu Pizenberg - @mpizenberg\n- Thomas Forgione - @tforgione ([elm-pep] polyfill)\n- Robert Vollmert - @robx ([elm-pep] polyfill)\n- Matthew Dupree - @4onen (upgrade File type to official one in elm/file)\n- Brendan Weibrecht - @ZimbiX (documentation)\n- Simon Lydell - @lydell (add support for metaKey)\n","funding_links":[],"categories":["Elm"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmpizenberg%2Felm-pointer-events","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmpizenberg%2Felm-pointer-events","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmpizenberg%2Felm-pointer-events/lists"}