☰

jQuery-Extensions-touchJS

jQuery-Extensions-touchJS是一个非常简单的jQuery touch扩展，用于适配移动端的常用touch操作（点击tab、长按longPress、滑动left right up down）

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

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

  1. // ==UserScript==
  2. // @name         jQuery-Extensions-touchJS
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  jQuery-Extensions-touchJS是一个非常简单的jQuery touch扩展，用于适配移动端的常用touch操作（点击tab、长按longPress、滑动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.log("jQuery-Extensions-touchJS 缺少jQuery依赖")
  12. 		return false;
  13. 	}
  14. 	$.fn.touch = function(v, fn) {
  15. 		// 预处理
  16. 		var defFn = function() {
  17. 				return false
  18. 			},
  19. 			fnMap = {
  20. 				"def": defFn,
  21. 				"left": defFn,
  22. 				"right": defFn,
  23. 				"top": defFn,
  24. 				"down": defFn,
  25. 				"tap": defFn,
  26. 				"longPress": defFn
  27. 			};
  28. 		if (typeof v === "string" && typeof fn === "function" && fnMap.hasOwnProperty(v)) {
  29. 			fnMap[v] = fn;
  30. 		} else if (typeof v === "object" && !fn) {
  31. 			fnMap = $.extend({}, fnMap, v);
  32. 		}
  33. 		// 正式处理
  34. 		if (v) {
  35. 			var t = $(this),
  36. 				i = -1,
  37. 				x = -1,
  38. 				x1, x2, y1, y2;
  39. 			t[0].addEventListener('touchstart', ts, false);
  40. 			t[0].addEventListener('touchmove', tm, false);
  41. 			t[0].addEventListener('touchend', te, false);
  42.  
  43. 			//具体实现
  44. 			function init(e, flag) { //初始化
  45. 				if (flag !== false) {
  46. 					e = e || window.event
  47. 					e.preventDefault();
  48. 				}
  49. 				clearTimeout(x);
  50. 				clearTimeout(i);
  51. 				x = -1, i = -1;
  52. 				return e;
  53. 			}
  54.  
  55. 			function dir(x1, y1, x2, y2) { //判方向
  56. 				if (Math.abs(y2 - y1) < Math.abs(x2 - x1)) {
  57. 					if (x2 > x1) {
  58. 						return "right"
  59. 					} else {
  60. 						return "left"
  61. 					}
  62. 				} else {
  63. 					if (y2 > y1) {
  64. 						return "down"
  65. 					} else {
  66. 						return "up"
  67. 					}
  68. 				}
  69. 				return "def"
  70. 			}
  71.  
  72. 			function ts(e) { //touchstart
  73. 				var e = init(e);
  74. 				x1 = e.changedTouches[0].clientX;
  75. 				y1 = e.changedTouches[0].clientY;
  76. 				console.log("ts " + x1 + "," + y1)
  77. 				i = setTimeout(function() {
  78. 					i = -1;
  79. 					fnMap["longPress"]();
  80. 				}, 600)
  81. 			}
  82.  
  83. 			function tm(e) { //touchmove
  84. 				var e = e || window.event;
  85. 				x2 = e.changedTouches[0].clientX;
  86. 				y2 = e.changedTouches[0].clientY;
  87. 				console.log("tm " + x2 + "," + y2)
  88. 				if (Math.abs(x1 - x2) > 10 || Math.abs(y1 - y2) > 10) {
  89. 					init(e);
  90. 					fnMap[dir(x1, y1, x2, y2)]()
  91. 				}
  92.  
  93. 				// x = setTimeout(function() {
  94. 				// 	fnMap[dir(x1, y1, x2, y2)]
  95. 				// }, 200);
  96. 			}
  97.  
  98. 			function te(e) { //touchend
  99. 				console.log("te")
  100. 				var e = e || window.event;
  101. 				e.preventDefault();
  102. 				if (i >= 0) {
  103. 					fnMap["tap"]();
  104. 				}
  105. 				init(e, false)
  106. 			}
  107. 		}
  108. 		return $(this)
  109. 	}
  110. })(jQuery);