【移动端debug-3】部分安卓机型不触发touchend事件的解决方案

最近在项目中遇到一个奇怪的问题，有一个需求是这样：页面上有一个按钮，滚动页面时让它消失，停止滚动时让它显示。

常规思路：

step1、监听touchstart事件，记录Touch对象中pageY初始值startY；

step2、监听touchmove事件，记录Touch对象中pageY的变化后的值endY，当大于（endY-startY）的绝对值大于某个阈值时隐藏按钮；

step3、监听touchend事件，当触发touchend时，展现按钮

代码如下：

var startY,endY;

$("body").on("touchstart", touchStartRecord)
             .on("touchmove", touchMoveHide)
            .on("touchend", touchEndShow);

function touchStartRecord(event){
        var touch = event.touches[0];
         startY = touch.pageY;
 };

function touchMoveHide(event){
        var touch = event.touches[0];
        endY = touch.pageY; 
          if (Math.abs(endY - startY) >= 5) {
            //此处省略隐藏按钮的操作
         }
 };

function touchEndShow(event){
          //此处省略重新展现按钮的操作
 };

我们想得思路很清晰简洁，并且在iPhone上能顺利实现我们要的效果，但是尼玛到了安卓上，手指离开屏幕后，竟然按钮没有展现！！？？WTF！

用工具调试，发现在触发touchend事件的函数里打断点，竟然进不去！！！

所以产生这一问题的原因找到了：touchend事件未被触发！

 

如何解决？

在stackoverflow上已经有相关话题的讨论，不少人提到，这个问题由来已久，已经给谷歌提bug了（谷歌传送门：WebView touchevents are not fired propperly if e.preventDefault() is not used on touchstart and touchmove），但是最新的安卓版本还是没修复……再次WTF！！！

在讨论中有提到如下两种解决方案：

解决方案1：

在监听touchstart或者touchmove事件的函数里，阻止事件的默认行为event.preventDefault()，那么到touchend就能正常触发。

代码如下：

var startY,endY;

$("body").on("touchstart", touchStartRecord)
             .on("touchmove", touchMoveHide)
            .on("touchend", touchEndShow);

function touchStartRecord(event){
        var touch = event.touches[0];
         startY = touch.pageY;
 };

function touchMoveHide(event){
        var touch = event.touches[0];
        endY = touch.pageY; 
          if (Math.abs(endY - startY) >= 5) {
            //此处省略隐藏按钮的操作
           event.preventDefault();
         }
 };

function touchEndShow(event){
          //此处省略重新展现按钮的操作
 };

尼玛，滚不动了啊……由于移动端touchmove事件的默认行为就是滚动页面，我们给阻止掉了，touchend是触发了，但是不是我们想要的效果。第三次WTF！！！

国外知名插件mobiscroll的博客里有分享关于这个问题的一些处理经验：（传送门：Working with touch events）

On Android ICS if no preventDefault is called on touchstart or the first touchmove, furthertouchmove events and the touchend will not be fired. As a workaround we need to decide in the first touchmove if this is a scroll (so we don’t call preventDefault) and then manually trigger touchend。

大意是：在安卓4.0系统（即Android ICS系统），如果在touchstart和第一个touchmove触发时，没有调用preventDefault，那么后面touchmove（连续触发）以及最后的touchend都不会被触发。所以我们需要决定第一个touchmove是否是一个滚动事件（如果是，则不能preventDefault阻止默认行为）然后手动触发touchend。

 

解决方案2：

同时绑定touchcancel和touchend事件，这样在安卓上就能通过触发touchcancel来重新展示我们的按钮。

在touchcancel却能正常触发，而在我们的这个需求里，touchcancel的情况下，我们也是希望按钮重新展现的，那不正好就是我们想要的效果吗？

代码如下：

var startY,endY;

$("body").on("touchstart", touchStartRecord)
             .on("touchmove", touchMoveHide)
            .on("touchcancel touchend", touchEndShow);

function touchStartRecord(event){
        var touch = event.touches[0];
         startY = touch.pageY;
 };

function touchMoveHide(event){
        var touch = event.touches[0];
        endY = touch.pageY; 
          if (Math.abs(endY - startY) >= 5) {
            //此处省略隐藏按钮的操作
         }
 };

function touchEndShow(event){
          //此处省略重新展现按钮的操作
 };

好了，现在能够解决我们的需求了，但其实还不是最优解，因为我们如果还想给touchcancel单独增加一个操作，就不能够了。所以最根本的还是寄希望于谷歌尽早解决这个历史遗留bug。