移动端开发踩坑日记——安卓4.4.2不触发touchend事件

背景：最近在公司开发一个景区人流量卡片
要求：卡片类似轮播图，可以左右滑动查看不同的数据
问题：在低端安卓机左右滑动无响应（安卓4.4.2）
解决过程：
1.确定问题所在：我首先考虑到的但是性能问题，由于在touchmove事件中的处里函数非常浪费 性能，所以我再touchmove事件的处里函数里面进行了节流，问题还是没有解决，不但没有解决反而其他的高端机型也变得非常卡顿。然后我又考虑是不支持touch事件，而后我再每一个事件的处里函数中添加alert();语句，测试结果touchend事件没有触发。
2.解决问题：网上查资料可知是浏览器的默认行为阻止了touchend事件的触发。但是阻止默认行为后又有新的问题，就上下滚动也失效了，进一步解决，请看注释部分。

day.on("touchmove",function(event){    var touch = event.touches[0];    endPosition = {        x: touch.clientX    }    deltaX = endPosition.x - startPosition.x;    var distance = deltaX+(-data.indexDay*(dayBoxWidth+15));    animate(distance);    if (Math.abs(deltaX) > 5) { // 滚动距离大于5        event.preventDefault();    }    });

问题的深入：
1.touch事件？

touchstart事件：当手指触摸屏幕的时候触发， 及时 有一个手指放在屏幕上也会触发；touchmove事件：当手指在屏幕上滑动的时候触发，是一个持续的过程，在触发事件的过程中 可以调用preventDefult（)方法阻止滚动；touchend事件： 当手指从屏幕上移开的时候触发；touchcancel事件：当系统停止跟踪触摸的时候触发， 比如 来电话 或者短信 或者其他的提醒的时候 会打断touchmove事件；单击时的触发顺序：touchstart -> touchmove -> touchend;滑动时的触发顺序：touchstart -> touchmove -> touchmove -> ....... ->touchmove ->touchend;

2.安卓4.0的touch事件的触发过程

单击时的触发顺序：touchstart -> touchmove -> touchend;滑动时的触发顺序：touchstart -> touchmove -> touchcancel;

3.为什么要阻止浏览器默认行为

考虑性能问题，安卓4.0的浏览器只允许触发一次用户自定的touchmove的事件处理函数，如果多次触发就会触发浏览器的默认行为，直接触发touchcancel事件。所以在touchmove的处里函数中阻止默认行为就能解决这个问题。