touchmove在android下面只触发一次的奇葩设定

touchmove事件只触发一次的问题
　　在Android下直接使用touchmove事件会在很多浏览器中出现每次操作只触发一次touchmove的情况。这是因为Android中对触屏事件奇葩解析造成的，在其它系统上没有这个情况。我们可以在touchstart事件中加入preventDefalut来解决，但这会带来其它问题。
运行<meta name="viewport" content="width=device-width,user-scalable=no" />
<input id="coords"></input>
<script>
document.addEventListener("touchmove",function(e){
  var p=e.touches[0];
  coords.value="("+p.clientX+","+p.clientY+")";
});
</script>
　　这个代码在Android(4.0.3)下只有Firefox(24)可以正常工作，Chrome(29)、QQ(4.4)、UC(9.3)，全都都只能触发一次touchmove。解决的方法是在touchstart时加上preventDefalut。
document.addEventListener("touchstart",function(e){
  e.preventDefault();
});
　　加上这个代码后所有的浏览器都可以正常处理touchmove了，但是会出现其它问题。例如这个例子中有个INPUT:TEXT，如果把touchstart事件的默认动作给阻止了我们就无法选中这个控件，无法编辑这个文本控件里面的文字（有少数浏览器可以）。这只是一个例子而已，阻止了touchstart的默认动作会导致其它，CLICK事件不触发、超链接失效，等之类的问题。所以，我们除了阻止touchstart的默认动作之外还要对内部的一些特殊元素做处理。让那些特殊的元素上的事件不冒泡出去，以防止默认动作被阻止。
document.addEventListener("touchstart",function(e){
  /^(?:INPUT|TEXTAREA|A)$/.test(e.target.tagName)||e.preventDefault();
});
　　只有触发对象不是这些特殊元素时才阻止默认事件，这样就能避免特殊元素无法实现默认行为。这里的INPUT、TEXTAREA、A，三个只是比较常用的需要默认行为的元素，如果有需要还得添加其它的。虽然可以解决问题，但是这么做也会导致其它问题。当触控从这些特殊元素上开始拖动时将和最初的结果一样touchmove无法正常工作。不过根据用户的操作习惯通常也不会在这些特殊元素上做拖拽，所以并不会造成太大影响。我目前就这么解决了，如果大家还有是更好的方法欢迎分享～

---

笔者语：
某日，笔者写了一个手动触摸滑动图片的控件在pc和ios上运行良好，不过在anroid上面有顿卡现象，痛下心来每次触碰都打印事件发现每次touchmove都只触发一次，也是醉了。