解決某些手机（移动端）无法触发touchend事件

发表于 | 分类于 | |

开发移动端项目，虽然不用兼容头疼的IE浏览器，但是面对市场上各款手机兼容问题，也是一个持久战。这篇主要讲touch事件的兼容问题。

解決某些手机（移动端）无法触发touchend事件

触屏事件的基本过程

js的触屏事件，主要有三个事件：touchstart，touchmove，touchend。

这三个事件最重要的属性是 pageX和 pageY，表示X坐标，Y坐标。
touchstart=在触摸开始时触发事件
touchend=在触摸结束时触发事件
touchmove=这个事件比较奇怪，按道理在触摸到过程中不断激发这个事件才对，但是在我的 Android 1.5 中，在 touchstart 激发后激发一次，然后剩余的都和 touchend 差不多同时激发。

而在我做的一个项目中，在某些手机上会出现不能触发touchend事件。

部分代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
function listSlideChange(options) {
	var delObj = options.find('.cheque-sign-row'),
			touchStartX = 0,
			touchMoveX = 0,
			touchSlideValue = 0,
			touchStartY = 0,
			touchMoveY = 0,
			touchSlideValue2 = 0,
			boxWidth = 0;
	for(var i = 0; i < delObj.length; i++) {
		(function(i) {
			delObj.eq(i).off("touchstart.touch").on('touchstart.touch', function(e) {
				moveFlag = false;
				var e = e || window.event;
				touchStartX = e.originalEvent.changedTouches[0].pageX;
				touchStartY = e.originalEvent.changedTouches[0].pageY;
			});

			delObj.eq(i).off("touchmove.touch").on('touchmove.touch', function(e) {
				if ($(this).hasClass("disabled")) {
					return false;
				}
				var e = e || window.event;
				boxWidth = parseInt($('.transfer-plan-change').width());
				var touchMoveX = e.originalEvent.changedTouches[0].pageX;
				touchSlideValue = touchStartX - touchMoveX;
				var touchMoveY = e.originalEvent.changedTouches[0].pageY;
				touchSlideValue2 = touchStartY - touchMoveY;
				
				if(Math.abs(touchSlideValue2)<Math.abs(touchSlideValue)){
					if(isSlideflag) {
						$(delObj).stop().animate({
							'left': '0'
						}, 200);
						touchSlideValue = 0;
					} else {
						if(touchSlideValue > 0 && touchSlideValue < boxWidth) {
							$(this).css('left', -touchSlideValue);
						} else if(touchSlideValue > boxWidth) {
							$(this).css('left', -boxWidth);
						} else {
							$(this).css('left', '0');
							touchSlideValue = 0;
						}
					}
					moveFlag = true;
				}
				
			});
			delObj.eq(i).off("touchend.touch").on('touchend.touch', function(e) {
				if ($(this).hasClass("disabled")) {
					return false;
				}
				var e = e || window.event;
				if(moveFlag) {
					if(touchSlideValue > 60) {
						$(this).stop().animate({
							'left': -boxWidth
						}, 200);
						isSlideflag = true;
					} else {
						$(this).stop().animate({
							'left': '0'
						}, 200);
						touchSlideValue = 0;
						isSlideflag = false;
					}
					
				} else {
					if(touchSlideValue === 0) {
						showChequeList($(this).find(".cheque-sign-arrow"));
					} else {
						$(delObj).stop().animate({
							'left': '0'
						}, 200);
						touchSlideValue = 0;
						isSlideflag = false;
					}
				}
			});
		})(i)
	}
}

这是移动端最常见的功能，手指向左滑显示删除按钮。当你滑的比较少的距离，touchend时会隐藏这个删除按钮，只有你滑动到一定距离的时候，才会把整个删除按钮显示出来。而在某些手机上无法触发touchend事件，导致出现一半的按钮。

解决方法

只要在 touchstart 的时候调用下 event.preventDefault(); 即可让其他事件都正常被触发了!