{"id":22487249,"url":"https://github.com/tuxracer/touchclick","last_synced_at":"2025-10-22T19:43:59.817Z","repository":{"id":2102323,"uuid":"3043520","full_name":"tuxracer/touchclick","owner":"tuxracer","description":"Provides immediate visual feedback on touch for native-feeling web apps","archived":true,"fork":false,"pushed_at":"2017-05-01T06:32:17.000Z","size":81,"stargazers_count":42,"open_issues_count":1,"forks_count":12,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-24T15:23:40.355Z","etag":null,"topics":["fastclick","mobile-web","obsolete","ux"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"scrooloose/snipmate-snippets","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tuxracer.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}},"created_at":"2011-12-24T03:40:15.000Z","updated_at":"2023-05-12T16:38:52.000Z","dependencies_parsed_at":"2022-08-20T17:20:25.979Z","dependency_job_id":null,"html_url":"https://github.com/tuxracer/touchclick","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/tuxracer%2Ftouchclick","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuxracer%2Ftouchclick/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuxracer%2Ftouchclick/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuxracer%2Ftouchclick/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tuxracer","download_url":"https://codeload.github.com/tuxracer/touchclick/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228500212,"owners_count":17930009,"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":["fastclick","mobile-web","obsolete","ux"],"created_at":"2024-12-06T17:16:11.844Z","updated_at":"2025-10-22T19:43:54.555Z","avatar_url":"https://github.com/tuxracer.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"### ⚠️  Note: This is no longer necessary, nor recommended for the latest versions of mobile browsers. See: https://webkit.org/blog/5610/more-responsive-tapping-on-ios/\n\ntouchclick\n==================\n\nThis is a small jquery plugin that allows you to easily bind to the touch or click events depending on what's available for the given platform. Unlike similar scripts, this also provides *immediate* visual feedback on touch platforms -- just as native apps do.\n\n## Getting Started\n1. Include the touchclick.js file on the page after jquery, or require it with [browserify](https://github.com/substack/node-browserify).\n\n2. Bind to the **touchclick** event where you would have otherwise used click or touchend\n```javascript\n\t$(\".menu-btn\").on(\"touchclick\", function () {\n\t\tconsole.log(\"अनित्य\");\n\t});\n```\n\n3. Define a **.touchactive** style for the given element\n```css\n\t.menu.btn.touchactive {\n\t\tcolor: #eee;\n\t\tbackground-color: #333;\n\t}\n```\n\n4. Disable the default touch overlay so it doesn't interfere with your custom .touchactive style\n```css\n\t* {\n            -webkit-touch-callout: none;\n            -webkit-tap-highlight-color: rgba(0,0,0,0);\n        }\n```\n\n5. (Optional) For delegated events add **data-touchclick=\"true\"** to the element you want the touchactive class to be added to.\n```html\n\t\u003cdiv class=\"menu btn\" data-touchclick=\"true\"\u003eMenu\u003c/div\u003e\n```\n\n## Traditional Solutions\n### Bind to touchend ###\nBinding to touchend or using a script such as [fastclick](https://github.com/ftlabs/fastclick) will remove the delay for triggering the event. However, unlike touchclick, they do not provide immediate visual feedback as native apps do.\n\n### Bind to touchend + provide a :hover style ###\nBinding to touchend or using [fastclick](https://github.com/ftlabs/fastclick) will remove the delay and provide some visual feedback. However, unlike touchclick and most native apps, when the user removes their finger from the element the :hover style sticks. While subtle, this still leaves web apps with a somewhat laggy feel.\n\n### Rely on tap-highlight-color ###\nSome browsers will add a large translucent overlay when items are tapped. However you do not have control over the exact style of an actively pressed element. This typically ends up looking a bit janky.\n\n## License\nCopyright (c) 2015, Derek Petersen\n\nLicensed under the MIT license.\n\nhttp://derek.cloud/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftuxracer%2Ftouchclick","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftuxracer%2Ftouchclick","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftuxracer%2Ftouchclick/lists"}