🏠 返回首頁 

Greasy Fork is available in English.

jQuery-Extensions-touchJS

jQuery-Extensions-touchJS是一个非常简单的jQuery touch扩展,用于适配移动端的常用touch操作(点击tab、双击dbTab、长按longPress、长按终止longPressCancel、滑动swipe以及具体滑动方向left、right、up、down),并兼容鼠标手势操作

Dette script bør ikke installeres direkte. Det er et bibliotek, som andre scripts kan inkludere med metadirektivet // @require https://update.greasyfork.org/scripts/454450/1156520/jQuery-Extensions-touchJS.js

  1. // ==UserScript==
  2. // @name jQuery-Extensions-touchJS
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.8
  5. // @description jQuery-Extensions-touchJS是一个非常简单的jQuery touch扩展,用于适配移动端的常用touch操作(点击tab、双击dbTab、长按longPress、长按终止longPressCancel、滑动swipe以及具体滑动方向left right up down),并兼容鼠标手势操作
  6. // @author tutu辣么可#(greasyfork)/IcedWatermelonJuice(github)
  7. // @grant none
  8. // ==/UserScript==
  9. (function() {
  10. const fnKeyArray = ["start","end","swipe", "left", "right", "up", "down", "tap", "dbTap", "longPress","longPressCancel"]; //可用的事件名
  11. const aboutTouchJS = {
  12. "name": "jQuery-Extensions-touchJS",
  13. "version": "1.8",
  14. "description": "jQuery-Extensions-touchJS是一个非常简单的jQuery touch扩展,用于适配移动端的常用touch操作(点击tab、双击dbTab、长按longPress、长按终止longPressCancel、滑动swipe以及具体滑动方向left right up down),并兼容鼠标手势操作",
  15. "author": "tutu辣么可#(greasyfork)/IcedWatermelonJuice(github)",
  16. "url": "https://greasyfork.org/zh-CN/scripts/454450",
  17. "event":fnKeyArray.toString()
  18. };
  19. if (typeof $ !== "function" && typeof jQuery !== "function") {
  20. console.error("jQuery-Extensions-touchJS 缺少jQuery依赖")
  21. return false;
  22. }
  23. function jsonExtend(json1 = {}, json2 = {}, json3 = {}) {
  24. return $.extend(json1, json2, json3)
  25. }
  26. function getFnName(fn) {
  27. let name = ""
  28. if (fn.name) {
  29. name = fn.name
  30. } else {
  31. name = fn.toString().match(/function\s*([^(]*)\(/);
  32. name = name ? name[1] : null
  33. }
  34. return fnKeyArray.indexOf(name) < 0 ? name : null
  35. }
  36. $.fn.touch = function(evt, fn, fnName = null) {
  37. // 预处理
  38. var $that = $(this),
  39. that = $that[0];
  40. that.libForTouchJsExt = that.libForTouchJsExt ? that.libForTouchJsExt : {};
  41. var fnMap = jsonExtend({}, that.libForTouchJsExt);
  42. function addFn(e, f, n) {
  43. if (fnKeyArray.indexOf(e) < 0) {
  44. let msg = "$.touch(evt, fn, fnName)参数错误,指定事件(evt)不支持。支持的事件列表:";
  45. console.error(msg + fnKeyArray.toString());
  46. return false;
  47. }
  48. fnMap[e] = fnMap[e] ? fnMap[e] : {};
  49. if (!n) { //无方法名,获取并使用默认数字id
  50. defAry = Object.keys(fnMap[e]).filter((v) => {
  51. return /^\d{1,}$/.test(v)
  52. });
  53. //获取可用数字id
  54. if (!fnMap[e][defAry.length]) { //假设id连续,长度就是新id
  55. n = defAry.length
  56. } else { //说明id不连续(手动删过事件方法),寻找中间缺少的id
  57. defAry.sort((a, b) => {
  58. return a - b
  59. });
  60. for (let i = 0; i < defAry.length; i++) {
  61. if (defAry[i] !== i) {
  62. n = i;
  63. break;
  64. }
  65. }
  66. }
  67. }
  68. fnMap[e][n] = f
  69. return true
  70. }
  71. if (typeof evt === "string" && typeof fn === "function") {
  72. if (!addFn(evt, fn, fnName ? fnName : getFnName(fn))) {
  73. return false
  74. }
  75. } else if (typeof evt === "object" && !fn) {
  76. for (let e in evt) {
  77. if (!addFn(e, evt[e], getFnName(evt[e]))) {
  78. return false
  79. }
  80. }
  81. }
  82. that.libForTouchJsExt = jsonExtend({}, that.libForTouchJsExt, fnMap);
  83. //添加事件
  84. if (!that.libForTouchJsExt.eventLoaded) {
  85. that.libForTouchJsExt.eventLoaded = true;
  86. var checkFnExist=function(evt){ // 检查是否存在该事件
  87. return that.libForTouchJsExt.hasOwnProperty(evt) && typeof that.libForTouchJsExt[evt][0]==="function";
  88. }
  89. var execFn = function(evt, params = {}) { //执行方法
  90. if (!evt) {
  91. return false
  92. }
  93. if (/left|right|up|down/.test(evt)) {
  94. evt = [evt, "swipe"];
  95. } else {
  96. evt = [evt];
  97. }
  98. var banReg=new RegExp("all|\\*|"+evt.join("|"),"i");
  99. for(let i=0;i<evt.length;i++){
  100. if(that.getAttribute("touchJS-disabled")===""||banReg.test(that.getAttribute("touchJS-disabled"))){
  101. return false
  102. }
  103. }
  104. params.target = that;
  105. evt.forEach((e) => {
  106. e = that.libForTouchJsExt[e] ? that.libForTouchJsExt[e] : {};
  107. for (let i in e) {
  108. if (typeof e[i] === "function") {
  109. e[i](params);
  110. }
  111. }
  112. })
  113. }
  114. var touch_timer = -1,
  115. lp_timer = -1,
  116. tap_timer = -1,
  117. touch_flag = false,
  118. lp_flag = false,
  119. swipe_flag = false,
  120. mouseDown_flag = false,
  121. tap_sum = 0,
  122. pos = {
  123. x: 0,
  124. y: 0
  125. };
  126. function initTouch() {
  127. touch_flag = true;
  128. touch_timer !== -1 && clearTimeout(touch_timer);
  129. touch_timer = setTimeout(() => {
  130. touch_flag = false;
  131. }, 100)
  132. }
  133. that.addEventListener('touchstart', (e) => {
  134. initTouch();
  135. e = e || window.event;
  136. ts(e);
  137. }, false);
  138. that.addEventListener('touchmove', (e) => {
  139. initTouch();
  140. e = e || window.event;
  141. tm(e);
  142. }, false);
  143. that.addEventListener('touchend', (e) => {
  144. initTouch();
  145. e = e || window.event;
  146. te(e);
  147. }, false);
  148. that.addEventListener('mousedown', (e) => {
  149. mouseDown_flag = true;
  150. e = e || window.event;
  151. !touch_flag && ts(e);
  152. }, false);
  153. that.addEventListener('mousemove', (e) => {
  154. if (!mouseDown_flag) {
  155. return false
  156. }
  157. e = e || window.event;
  158. !touch_flag && tm(e);
  159. }, false);
  160. that.addEventListener('mouseup', (e) => {
  161. mouseDown_flag = false;
  162. e = e || window.event;
  163. !touch_flag && te(e);
  164. }, false);
  165. //具体实现
  166. function dir(past, now) { //判方向
  167. if (Math.abs(past.x - now.x) > Math.abs(past.y - now.y)) {
  168. if (now.x > past.x) {
  169. return "right"
  170. } else {
  171. return "left"
  172. }
  173. } else {
  174. if (now.y > past.y) {
  175. return "down"
  176. } else {
  177. return "up"
  178. }
  179. }
  180. return null
  181. }
  182. function ts(e) { //touchstart
  183. lp_timer !== -1 && clearTimeout(lp_timer);
  184. lp_timer = -1;
  185. lp_flag = false;
  186. swipe_flag = false;
  187. pos = {
  188. x: e.clientX || e.changedTouches[0].clientX,
  189. y: e.clientY || e.changedTouches[0].clientY
  190. }
  191. lp_timer = setTimeout(function() {
  192. if (!swipe_flag) {
  193. lp_timer = -1;
  194. lp_flag = checkFnExist("longPress");
  195. lp_flag && execFn("longPress", {
  196. 0: pos
  197. });
  198. }
  199. }, 600)
  200. execFn("start", {
  201. 0: pos
  202. });
  203. }
  204. function tm(e) { //touchmove
  205. let temp = {
  206. x: e.clientX || e.changedTouches[0].clientX,
  207. y: e.clientY || e.changedTouches[0].clientY
  208. }
  209. if (!lp_flag && (Math.abs(pos.x - temp.x) > 10 || Math.abs(pos.y - temp.y) > 10)) {
  210. swipe_flag = checkFnExist("swipe") || checkFnExist("left") || checkFnExist("right") || checkFnExist("up") || checkFnExist("down");
  211. lp_timer !== -1 && clearTimeout(lp_timer);
  212. lp_timer = -1;
  213. swipe_flag && execFn(dir(pos, temp), {
  214. 0: pos,
  215. 1: temp
  216. });
  217. pos = temp;
  218. }
  219. }
  220. function te(e) { //touchend
  221. lp_timer !== -1 && clearTimeout(lp_timer);
  222. tap_timer !== -1 && clearTimeout(tap_timer);
  223. lp_timer = -1;
  224. tap_timer = -1;
  225. if (lp_flag) {
  226. execFn("longPressCancel", {
  227. 0: pos
  228. });
  229. } else if (!swipe_flag) {
  230. tap_sum += 1;
  231. if (tap_sum >= 2) {
  232. tap_sum = 0;
  233. execFn("dbTap", {
  234. 0: pos
  235. });
  236. } else {
  237. tap_timer = setTimeout(() => {
  238. tap_sum = 0;
  239. execFn("tap", {
  240. 0: pos
  241. });
  242. }, 200)
  243. }
  244. }
  245. execFn("end", {
  246. 0: pos
  247. });
  248. }
  249. }
  250. return $that
  251. }
  252. $.fn.unbindTouch = function(evt, fnName = null) {
  253. var $that = $(this),
  254. that = $that[0];
  255. if (typeof evt === "string") {
  256. that.libForTouchJsExt = that.libForTouchJsExt ? that.libForTouchJsExt : {};
  257. if (that.libForTouchJsExt[evt]) {
  258. if (fnName) {
  259. fnName = typeof fnName === "function" ? getFnName(fnName) : fnName;
  260. delete that.libForTouchJsExt[evt][fnName];
  261. } else {
  262. delete that.libForTouchJsExt[evt]
  263. }
  264. }
  265. }
  266. return $that
  267. }
  268. $.fn.aboutTouch = function(query) {
  269. return aboutTouchJS[query] ? aboutTouchJS[query] : aboutTouchJS
  270. }
  271. })(jQuery);