【移动端debug-3】部分安卓机型不触发touchend事件的解决方案 - 推酷
【移动端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了（谷歌传送门：
），但是最新的安卓版本还是没修复……再次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的博客里有分享关于这个问题的一些处理经验：（传送门：
On Android ICS if no
preventDefault
is called on&
touchstart
or the first&
events and the&
will not be fired. As a workaround we need to decide in the first&
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。
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
排版有问题
没有分页内容
视频无法显示
图片无法显示如何修复移动浏览器上 touchend 事件不触发的bug_百度知道
如何修复移动浏览器上 touchend 事件不触发的bug
我有更好的答案
重新安装软件或者，对系统恢复出厂设置
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁移动端事件_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
移动端事件
上传于||文档简介
&&移​动​端​的​事​件​,​包​括​t​o​u​c​h​e​n​d​,​t​o​u​c​h​m​o​v​e​,​t​o​u​c​h​s​t​a​r​t​等
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
下载文档到电脑，查找使用更方便
还剩6页未读，继续阅读
你可能喜欢}