{"id":22296424,"url":"https://github.com/knowledgecode/silktouch","last_synced_at":"2025-03-25T22:37:19.410Z","repository":{"id":57359559,"uuid":"61300561","full_name":"knowledgecode/silktouch","owner":"knowledgecode","description":"A small library for handling touch event in mobile web apps","archived":false,"fork":false,"pushed_at":"2016-11-26T16:39:53.000Z","size":17,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-23T05:01:47.237Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/knowledgecode.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":"2016-06-16T14:27:06.000Z","updated_at":"2016-10-22T15:48:56.000Z","dependencies_parsed_at":"2022-09-06T22:21:51.945Z","dependency_job_id":null,"html_url":"https://github.com/knowledgecode/silktouch","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowledgecode%2Fsilktouch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowledgecode%2Fsilktouch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowledgecode%2Fsilktouch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowledgecode%2Fsilktouch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/knowledgecode","download_url":"https://codeload.github.com/knowledgecode/silktouch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245556976,"owners_count":20634888,"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":[],"created_at":"2024-12-03T17:45:32.994Z","updated_at":"2025-03-25T22:37:19.386Z","avatar_url":"https://github.com/knowledgecode.png","language":"JavaScript","readme":"# SilkTouch\n[![Circle CI](https://circleci.com/gh/knowledgecode/silktouch.svg?style=shield)](https://circleci.com/gh/knowledgecode/silktouch)  \n\nSilkTouch is a small library for handling `touch` event in mobile web apps.\n\n## WHY\nIn mobile browser, mainly Android Browser and iOS Safari, `click` event had a 300-350ms delay. Since the delay irritates users, we've had to handle it so as to react quickly to their tap operations. The good news is that in recent versions of those browsers it has been removed. However, we have to continue to handle it for a while to support older browsers.\n\n## How Does It Work\nThis library will append the following viewport meta tag to a current page if not specified there.\n```html\n\u003cmeta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1\"\u003e\n```\nIf want to enable `user-scalable`, specify the viewport in advance. By the way, in iOS 10, the `user-scalable=no` is ignored. Take note if plan to support this version.  \n\nIt will also append the following css if the browser supports it.\n```css\nhtml {\n    touch-action: manipulation;\n}\n```\nIn this way, in recent browsers the delay is able to be removed. In older browsers, this library will remove it with own method (using a `touchend` event).  \n\nAll the above are not applied to desktop browser. In any case, can handle `touch` event through the same interface.\n\n## Features\n- Small (approximately 1 kb, minifying and gzipping)\n- No Dependency\n- In desktop browser it also works\n\n## Installation\n*via npm:*\n``` shell\n$ npm install silktouch\n```\n\n*via Bower:*\n``` shell\n$ bower install silktouch\n```\n\n*directly:*\n``` html\n\u003cscript src=\"/path/to/silktouch.min.js\"\u003e\u003c/script\u003e\n```\n\n## Basic Usage\n```html\n\u003cbody\u003e\n  \u003cdiv class=\"container\"\u003e\n    \u003cdiv id=\"block\"\u003eSSS...\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/body\u003e\n```\n```javascript\ndocument.addEventListener('DOMContentLoaded', function () {\n    // Initializing only once.\n    silktouch.enchant(document.querySelector('.container'));\n\n    // Register a new touch event.\n    silktouch.on('green', '#block', function () {\n        console.log('Creeper!');\n    });\n}, false);\n```\n\n## API\n### *enchant([baseElement])*\n- {Object} **[baseElement]** - A base element that manages a touch or a click event. Omitting it is equivalent to specify the `document`.\n\nThe `enchant` method initializes the `SilkTouch` object. This method must be called only once at the beginning. The `baseElement` will listen to all `touch` or `click` events for itsself and the descendant elements, and then dispatch them.\n\n```javascript\nsilktouch.enchant();    // equivalent to `silktouch.enchant(document)`\n```\n\n#### NOTE\nAt least in iOS Safari, `touch` or `click` event usually will NOT be fired on the `document`. Thus, if your app supports iOS, the `baseElement` must be something other than it. The example is as follows:\n```html\n\u003cbody\u003e\n  \u003cdiv class=\"container\"\u003e\n\n  \u003c/div\u003e\n\u003c/body\u003e\n```\n```javascript\nsilktouch.enchant(document.querySelector('.container'));\n```\n\n### *on(name, selector, handler)*\n- {string} **name** - A unique event name\n- {string} **selector** - A selector you want to match.\n- {Function} **handler** - An event listener\n\nThe `on` method registers a new `touch` event, and returns the `SilkTouch` object.\n```html\n\u003cdiv id=\"cactus\"\u003eblock\u003c/div\u003e\n\u003cdiv id=\"stone\"\u003eblock\u003c/div\u003e\n```\n```javascript\n// method chaining\nsilktouch\n    .on('green', '#cactus', function () {\n        console.log('Creeper!');\n    })\n    .on('gray', '#stone', function () {\n        console.log('Skeleton!');\n    });\n```\n\n### *one(name, selector, handler)*\n- {string} **name** - A unique event name\n- {string} **selector** - A selector you want to match.\n- {Function} **handler** - An event listener that is fired only once.\n\nThe `one` method registers a new `touch` event that is fired **only once**, and returns the `SilkTouch` object.\n\n### *off([name])*\n- {string} **[name]** - An event name that want to delete from the registered events. Omitting it is equivalent to delete all the events.\n\nThe `off` method deletes from the registered events, and returns the `SilkTouch` object.\n\n```javascript\nsilktouch.off('green');\n\n// It's deleted all the events.\nsilktouch.off();\n```\n\n### *suspend([name])*\n- {string} **[name]** - An event name that want to suspend. Omitting it is equivalent to suspend all the events.\n\nThe `suspend` method suspends one or all of the registed events, and returns the `SilkTouch` object. The events won't be fired until it's called the `resume` method.\n\n```javascript\nsilktouch.suspend('gray');\n\n// It's suspended all the events.\nsilktouch.suspend();\n```\n\n### *resume([name])*\n- {string} **[name]** - An event name that want to resume. Omitting it is equivalent to resume all the events.\n\nThe `resume` method resumes one or all of the suspended events, and returns the `SilkTouch` object.\n\n```javascript\nsilktouch.resume('gray');\n\n// It's resumed all the suspended events.\nsilktouch.resume();\n```\n\n### *names([suspended])*\n- {boolean} **[suspended]** - Whether getting the suspended event names instead of all the event names.\n\nThe `names` method returns all the registered or suspended event names.\n\n```javascript\nsilktouch\n    .on('green', '#cactus', function () {\n        console.log('Creeper!');\n    })\n    .on('gray', '#stone', function () {\n        console.log('Skeleton!');\n    })\n    .suspend('gray');\n\nconsole.log(silktouch.names()); // ['green', 'gray']\nconsole.log(silktouch.names(true)); // ['gray']\n```\n\n### *event.preventDefault()*\n\nYou can use `preventDefault` in event handler.\n\n```javascript\nsilktouch.on('url-link', 'a', function (evt) {\n    // Prevents to jump to another page.\n    evt.preventDefault();\n})\n```\n\n### *event.stopPropagation()*\n\n`stopPropagation`, too.\n\n```javascript\nsilktouch.on('absorbing', '.bubble', function (evt) {\n    // Prevents the event bubbling.\n    evt.stopPropagation();\n})\n```\n\n## Browser Support\nAndroid Browser 4+, Chrome, Firefox, Safari, Edge and IE9+\n\n## License\nMIT\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknowledgecode%2Fsilktouch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fknowledgecode%2Fsilktouch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknowledgecode%2Fsilktouch/lists"}