{"id":17037730,"url":"https://github.com/dmq/mtouch","last_synced_at":"2025-04-12T13:42:42.652Z","repository":{"id":3175452,"uuid":"39189689","full_name":"DMQ/mTouch","owner":"DMQ","description":"mTouch移动端 ( 兼容pc端) 手势操作库","archived":false,"fork":false,"pushed_at":"2023-01-04T08:20:21.000Z","size":316,"stargazers_count":70,"open_issues_count":7,"forks_count":36,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-26T08:22:50.621Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DMQ.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-16T09:56:59.000Z","updated_at":"2024-10-25T04:49:46.000Z","dependencies_parsed_at":"2023-01-13T12:20:09.329Z","dependency_job_id":null,"html_url":"https://github.com/DMQ/mTouch","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DMQ%2FmTouch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DMQ%2FmTouch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DMQ%2FmTouch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DMQ%2FmTouch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DMQ","download_url":"https://codeload.github.com/DMQ/mTouch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248574626,"owners_count":21127047,"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-10-14T08:54:55.364Z","updated_at":"2025-04-12T13:42:42.632Z","avatar_url":"https://github.com/DMQ.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mTouch\nmTouch移动端 ( 兼容pc端) 手势操作库，解决`zepto`库“点透”的bug，并支持事件委托\n\n\n支持的事件：\n* `tap`  单击\n* `doubletap` 双击\n* `longtap`  长按\n* `swipestart`  滑动开始\n* `swipeend`  滑动结束\n* `swiping` 滑动\n* `swipeleft` 向左划\n* `swiperight` 向右划\n* `swipeup` 向上划\n* `swipedown` 向下划\n\n# 使用\n#### 1、npm 包\n```javascript\n// 安装\nnpm install mtouch-js --save\n\n// 引用\nimport { mtouchDom as mTouch } from 'mtouch-js';\n// import { mtouchVue as mTouch } from 'mtouch-js';\n// 需要使用es6语法的这样引入\n// import mtouchDom as mTouch from 'mtouch-js/dist/mtouch-dom.es.js';\n// import mtouchVue as mTouch from 'mtouch-js/dist/mtouch-vue.es.js';\n```\n\n#### 2、`\u003cscript\u003e` 标签 引用cdn路径\n```html\n\u003cscript src=\"https://unpkg.com/mtouch-js@1.0.1/dist/mtouch-dom.min.js\"\u003e\u003c/script\u003e\n\u003c!--\n通过 window.mTouch 调用\n--\u003e\n``` \n\n# API\n#### 1、mTouch.config（配置项）\n\n```javascript\n  mTouch.config({\n    tapMaxDistance: 10,    // 单击事件允许的滑动距离\n    doubleTapDelay: 200,   // 双击事件的延时时长（两次单击的最大时间间隔）\n    longTapDelay: 700,     // 长按事件的最小时长\n    swipeMinDistance: 20,  // 触发方向滑动的最小距离\n    swipeTime: 300,\t       // 触发方向滑动允许的最长时长\n    lockDirection: true, // 是否锁定方向，一旦触发横向/竖向滑动后，就一直锁定这个方向，如需不锁定方向，配置成false\n  })\n```\n\n以上是默认值，可根据具体使用场景自行配制配置项，但需要注意每个配置项之间的约束关系，比如`longTapDelay`不能比`doubleTapDelay`小...\n\n#### 2、.on(eventType, [proxyStr], handler(event))\n\n绑定事件方法，使用方式类似`jQuery`的`on`方法，支持链式调用，支持事件委托，回调函数返回`false`阻止冒泡及默认行为，同样可以用原生的`e.stoPropagation()`和`e.preventDefault()`\n\n\u003e 注：回调函数中被注入的参数`event`是拓展了的原生事件对象, 添加了属性`event.mTouchEvent`\n\n```javascript\nmTouchEvent = {\n  type: string,\n  target: dom,\n  pageX: number,\n  pageY: number,\n  startX: number,\n  startY: number,\n  moveX: number,\n  moveY: number\n}\n\n// 其中 startX、startY、moveX、moveY 只有 swiping 事件才有\n```\n\n使用方法\n```javascript\nmTouch('.btn').on('tap', function (e) {\n  //...\n}).on('doubletap', function (e) {\n  //...\n})\n.on('longtap', function (e) {\n  //...\n});\n\nmTouch('.btn-group').on('tap', '.btn', function (e) {\n  //...\n});\n```\n\n#### 3、.off(eventType, proxyStr, handler)\n取消绑定事件方法，使用方式类似`jQuery`的`off`，有一点需要注意，通过事件委托绑定的事件必须得由实际绑定事件的节点取消绑定，如：\n```javascript\nmTouch('.btn-group').on('tap', '.btn', function (e) {\n  //...\n});\n\n// .btn的tap事件委托到.btn-group，要取消该tap事件，要这样做:\nmTouch('.btn-group').off('tap', '.btn');\n\n// 暂没有实现这种方式：\nmTouch('.btn').off('tap'); //错误的方式\n```\n\n更多用法请查看 [demo](http://htmlpreview.github.io/?https://github.com/DMQ/mTouch/blob/master/demo.html) 为了你的更佳体验，请用Chrome模拟mobile或手机打开\n\n# vue 使用\n```html\n\u003cbody\u003e\n  ...\n  \u003cdiv class=\"demo\"\u003e\n    \u003cspan v-touch:tap=\"onTap\"\u003e点我\u003c/span\u003e\n  \u003c/div\u003e\n  ...\n  \u003cscript\u003e\n    Vue.use(mTouch);\n    var vue = new Vue({\n      el: '.demo',\n      data: {},\n      methods: {\n        onTap: function () {\n          console.log('你点击了一下');\n        }\n      }\n    })\n  \u003c/script\u003e\n\u003c/body\u003e\n```\n\n感谢您的阅读！\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmq%2Fmtouch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmq%2Fmtouch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmq%2Fmtouch/lists"}