Android 4.0.x 浏览器不触发 ontouchend 事件的解决

先强烈吐槽一下，不知道 Android Wekbit 开发人员怎么想的，如此糟糕 bug 从 4.0 到当下的 4.4 仍然如故，好像没有像修复的意思？难道这是改进不是 bug？

问题是这样的，使用 touch* 事件时，在 Android 4.0 上面的浏览器手指在 a 元素（或者其他任何元素）上做滑动操作，然后手指离开，结果不会触发 touchend 事件。同样的操作在 Android 2.x / ios 却会会正常触发 touchend 事件。到 touchmove 事件之后就终止掉，简单说，就是 touchend 事件丢失。天呐~无疑这是一个非常严重的bug——因为这是一个极其基础的事件，不可或缺！~My God~

看官们不信的话请试试这个测试用例。

[html]  view plain copy

1. <div id="foo"></div>  
2. <script>  
3. var el = document.getElementById('foo');  
4.     el.ontouchstart = function(e){  
5.             el.innerHTML = "touch start";  
6.     };  
7.     el.ontouchend = function(e){  
8.             el.innerHTML = "touch end";  
9.     };  
10.     el.ontouchmove = function(e){  
11.             el.innerHTML = "touch moved";  
12.     };  
13. </script>  

已经有许多人把该问题 report 了，详见：

• WebView touchevents are not fired propperly if e.preventDefault() is not used on touchstart and touchmove
• In webkit/webview touchmove/touchstart/touchend events get queued and don't fire until touch ends
  

怎么破？在 touchmove 事件中 e.preventDetault() 居然就可以。

[javascript]  view plain copy

1. el.ontouchend = function(e){  
2.    e.preventDefault(); // 可触发了  
3.    el.innerHTML = "touch end";  
4. };  

但是简单调用 e.preventDetault() 会导致另外一个问题，就是阻止了屏幕上下滚动的 scorll 事件。

这又怎么破？

最后，我在一位兄台的博客里找到思路《手机浏览器常用手势动作监听封装》，具体思路就是“兼容的解决办法是在 touchmove 时判断手势趋势大于预设值时（大于预设值证明有 move的动作趋势），停止默认的操作e.preventDefault()”。于是我的代码就是这样。

[javascript]  view plain copy

1. /** 
2.  * touchend事件丢失 
3.  */  
4. function fixTouchEndNotFire(e, a1, a2, a3, disX){  
5.     if(window.navigator.isAndroid_4){  
6.         if ( disX > 7 ) {  
7.             e.preventDefault();  
8.         }  
9.     }     
10. }  

加入到 touchmove 事件中。

另外一个方法个人原创（但是也是受了几个前辈的启发），见下面代码：

[html]  view plain copy

1. <script>  
2. var timerId;  
3. document.ontouchmove = function(e){  
4.     window.clearInterval(timerId);  
5.     timerId = window.setTimeout(myTouchEnd, 200);  
6.     // console.log('ddddddd');  
7.     // e.preventDefault();  
8. }  
9. function myTouchEnd(){  
10.     alert('why not start!!?')  
11. }  
12. // document.ontouchend = myTouchEnd;  
13. </script>  
14. Test onTouchEnd Event if be fired.  

在这里抛砖引玉了，如有更好的方法请告知。