☰

jQuery-Extensions-touchJS

jQuery-Extensions-touchJS是一个非常简单的jQuery touch扩展，用于适配移动端的常用touch操作（点击tab、双击dbTab、长按longPress、长按终止longPressCancel、滑动swipe以及具体滑动方向left right up down）

当前为 2022-11-30 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/454450/1123028/jQuery-Extensions-touchJS.js 

  1. // ==UserScript==
  2. // @name         jQuery-Extensions-touchJS
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.3
  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. 	if (typeof $ !== "function" && typeof jQuery !== "function") {
  11. 		console.error("jQuery-Extensions-touchJS 缺少jQuery依赖")
  12. 		return false;
  13. 	}
  14.  
  15. 	function getFnName(fn) {
  16. 		if (fn.name) {
  17. 			return fn.name
  18. 		} else {
  19. 			var fnstr = fn.toString().match(/function\s*([^(]*)\(/);
  20. 			return fnstr ? fnstr[1] : null
  21. 		}
  22. 	}
  23. 	$.fn.touch = function(evt, fn, fnName = null) {
  24. 		// 预处理
  25. 		var $that = $(this),
  26. 			that = $that[0];
  27. 		that.jQueryTouchFnMap = that.jQueryTouchFnMap ? that.jQueryTouchFnMap : {};
  28. 		var fnMap = $.extend({}, that.jQueryTouchFnMap),
  29. 			fnKeyArray = ["swipe", "left", "right", "up", "down", "tap", "dbTap", "longPress",
  30. 				"longPressCancel"];//可用的事件名
  31.  
  32. 		function addFn(e, f, n) {
  33. 			if (fnKeyArray.indexOf(e) < 0) {
  34. 				let msg = "$.touch(evt, fn, fnName)参数错误，指定事件(evt)不支持。支持的事件列表:";
  35. 				console.error(msg + fnKeyArray.toString());
  36. 				return false;
  37. 			}
  38. 			fnMap[e] = fnMap[e] ? fnMap[e] : {};
  39. 			if(!n){//无方法名，获取并使用默认数字id
  40. 				defAry=Object.keys(fnMap[e]).filter((v)=>{/^\d{1,}$/.test(v)});
  41. 				//获取可用数字id
  42. 				if(!fnMap[e][defAry.length]){//假设id连续，长度就是新id
  43. 					n=defAry.length
  44. 				}else{//说明id不连续（手动删过事件方法），寻找中间缺少的id
  45. 					defAry.sort((a,b)=>{return a-b});
  46. 					for(let i =0;i<defAry.length;i++){
  47. 						if(defAry[i]!==i){
  48. 							n=i;
  49. 							break;
  50. 						}
  51. 					}
  52. 				}
  53. 			}
  54. 			fnMap[e][n] = f
  55. 			return true
  56. 		}
  57. 		if (typeof evt === "string" && typeof fn === "function") {
  58. 			if (!addFn(evt, fn, fnName ? fnName : getFnName(fn))) {
  59. 				return false
  60. 			}
  61. 		} else if (typeof evt === "object" && !fn) {
  62. 			for (let e in evt) {
  63. 				if (!addFn(e, evt[e], getFnName(evt[e]))) {
  64. 					return false
  65. 				}
  66. 			}
  67. 		}
  68. 		that.jQueryTouchFnMap = $.extend({}, that.jQueryTouchFnMap, fnMap);
  69. 		//添加事件
  70. 		if (!that.jQueryTouchFnMap.eventLoaded) {
  71. 			that.jQueryTouchFnMap.eventLoaded = true;
  72. 			var execFn = function(evt) { //执行方法
  73. 				if (!evt) {
  74. 					return false
  75. 				}
  76. 				if(/left|right|up|down/.test(evt)){
  77. 					evt=[evt,"swipe"];
  78. 				}else{
  79. 					evt=[evt];
  80. 				}
  81. 				evt.forEach((e)=>{
  82. 					e = that.jQueryTouchFnMap[e] ? that.jQueryTouchFnMap[e] : {};
  83. 					for (let i in e) {
  84. 						if (typeof e[i] === "function") {
  85. 							e[i]();
  86. 						}
  87. 					}
  88. 				})
  89. 			}
  90. 			var lp_timer = -1,
  91. 				tap_timer = -1,
  92. 				lp_flag = false,
  93. 				swipe_flag = false,
  94. 				tap_sum = 0,
  95. 				pos = {
  96. 					x: 0,
  97. 					y: 0
  98. 				};
  99. 			that.addEventListener('touchstart', ts, false);
  100. 			that.addEventListener('touchmove', tm, false);
  101. 			that.addEventListener('touchend', te, false);
  102. 			//具体实现
  103. 			function dir(past, now) { //判方向
  104. 				if (Math.abs(past.x - now.x) > Math.abs(past.y - now.y)) {
  105. 					if (now.x > past.x) {
  106. 						return "right"
  107. 					} else {
  108. 						return "left"
  109. 					}
  110. 				} else {
  111. 					if (now.y > past.y) {
  112. 						return "down"
  113. 					} else {
  114. 						return "up"
  115. 					}
  116. 				}
  117. 				return null
  118. 			}
  119.  
  120. 			function ts(e) { //touchstart
  121. 				e = e || window.event
  122. 				lp_timer !== -1 && clearTimeout(lp_timer);
  123. 				lp_timer = -1;
  124. 				lp_flag = false;
  125. 				swipe_flag = false;
  126. 				pos = {
  127. 					x: e.changedTouches[0].clientX,
  128. 					y: e.changedTouches[0].clientY
  129. 				}
  130. 				lp_timer = setTimeout(function() {
  131. 					if (!swipe_flag) {
  132. 						lp_timer = -1;
  133. 						lp_flag = true;
  134. 						execFn("longPress")
  135. 					}
  136. 				}, 600)
  137. 			}
  138.  
  139. 			function tm(e) { //touchmove
  140. 				var e = e || window.event;
  141. 				let temp = {
  142. 					x: e.changedTouches[0].clientX,
  143. 					y: e.changedTouches[0].clientY
  144. 				}
  145. 				if (!lp_flag && (Math.abs(pos.x - temp.x) > 10 || Math.abs(pos.y - temp.y) > 10)) {
  146. 					swipe_flag = true;
  147. 					lp_timer !== -1 && clearTimeout(lp_timer);
  148. 					lp_timer = -1;
  149. 					execFn(dir(pos, temp));
  150. 				}
  151. 			}
  152.  
  153. 			function te(e) { //touchend
  154. 				var e = e || window.event;
  155. 				lp_timer !== -1 && clearTimeout(lp_timer);
  156. 				tap_timer !== -1 && clearTimeout(tap_timer);
  157. 				lp_timer = -1;
  158. 				tap_timer = -1;
  159. 				if (lp_flag) {
  160. 					execFn("longPressCancel");
  161. 				} else if (!swipe_flag) {
  162. 					tap_sum += 1;
  163. 					if (tap_sum >= 2) {
  164. 						tap_sum = 0;
  165. 						execFn("dbTap");
  166. 					} else {
  167. 						tap_timer = setTimeout(() => {
  168. 							tap_sum = 0;
  169. 							execFn("tap");
  170. 						}, 200)
  171. 					}
  172. 				}
  173. 			}
  174. 		}
  175. 		return $that
  176. 	}
  177. 	$.fn.unbindTouch = function(evt, fnName = null) {
  178. 		var $that = $(this),
  179. 			that = $that[0];
  180. 		if (typeof evt === "string") {
  181. 			that.jQueryTouchFnMap = that.jQueryTouchFnMap ? that.jQueryTouchFnMap : {};
  182. 			if (that.jQueryTouchFnMap[evt]) {
  183. 				if (fnName) {
  184. 					fnName = typeof fnName === "function" ? getFnName(fnName) : fnName;
  185. 					delete that.jQueryTouchFnMap[evt][fnName];
  186. 				} else {
  187. 					delete that.jQueryTouchFnMap[evt]
  188. 				}
  189. 			}
  190. 		}
  191. 		return $that
  192. 	}
  193. })(jQuery);