如何修复移动浏览器上 touchend 触发多次事件不触发的bug

来源：蜘蛛抓取(WebSpider) 时间：2017-05-14 10:21 标签： touchend事件无法触发
webapp（8）
先强烈吐槽一下，不知道 Android Wekbit 开发人员怎么想的，如此糟糕 bug 从 4.0 到当下的 4.4 仍然如故，好像没有像修复的意思？难道这是改进不是 bug？
问题是这样的，使用 touch* 事件时，在 Android 4.0 上面的浏览器手指在 a 元素（或者其他任何元素）上做滑动操作，然后手指离开，结果不会触发 touchend 事件。同样的操作在 Android 2.x / ios 却会会正常触发 touchend 事件。到 touchmove 事件之后就终止掉，简单说，就是 touchend 事件丢失。天呐~无疑这是一个非常严重的bug——因为这是一个极其基础的事件，不可或缺！~My God~
看官们不信的话请试试这个。
已经有许多人把该问题 report 了，详见：
怎么破？在 touchmove 事件中 e.preventDetault() 居然就可以。
[javascript]&
但是简单调用 e.preventDetault() 会导致另外一个问题，就是阻止了屏幕上下滚动的 scorll 事件。
这又怎么破？
最后，我在一位兄台的博客里找到思路，具体思路就是“兼容的解决办法是在 touchmove 时判断手势趋势大于预设值时（大于预设值证明有 move的动作趋势），停止默认的操作e.preventDefault()”。于是我的代码就是这样。
[javascript]&
加入到 touchmove 事件中。
另外一个方法个人原创（但是也是受了几个前辈的启发），见下面代码：
在这里抛砖引玉了，如有更好的方法请告知。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：176072次
积分：2376
积分：2376
排名：第15646名
原创：32篇
转载：200篇
(1)(2)(1)(1)(4)(1)(6)(2)(9)(1)(8)(14)(17)(16)(7)(16)(2)(5)(7)(4)(1)(5)(12)(12)(9)(13)(11)(17)(5)(6)(10)(7)关注51Testing
Wap站Bug小结
发表于： 11:41 &作者：蜡笔不小心 & 来源：51Testing软件测试网采编
推荐标签：
　　问题一：　　应用css3 translate3d 平移效果后的标签元素，在上的safari以及app的webview中会出现页面加载完成后其子元素闪动现象　　解决方法：　　1.可在其子元素统一添加和其相同的属性　　2.在其自身添加webkit-backface-visibility:hidden属性。（webkit-backface-visibility:hidden为隐藏被旋转的 div 元素的背面）　　问题二：　　使用touch事件时，android和iOS对touchend事件的响应处理方式不一致。比如：在a标签上使用touchend触发一个弹层显示，在android的浏览器上a标签上实现滑动手指操作，手指离开后，不会触发touchend事件，同样的操作在iOS上则会触发touchend事件。　　解决方法：var isSlide =$("a").bind("touchstart",function(){isSlide =});$("a").bind("touchmove",function(){isSlide =});$("a").bind("touchend",function(){if(isSlide)});　　问题三：　　iOS修复了 css position:fixed 1像素抖动的bug，不过却引出了另一个bug，当给某元素添加position:fixed属性，在首次加载页面的时候此元素会随着页面的滚动而滚动。　　解决方法：　　为此元素添加-webkit-transform：translate3d(0,0,0)属性即可　　问题四：　　在WAP下，常常会用到disply：table这个属性，当容器显示为table之后里面的元素会以表格的形式呈现，当有列是多行而有的是一行的时候在有些下一行的部分会以多行多形式呈现。问题的原因在哪里还不确定，但是解决方法找到列，给不要换行的部分加一个word-break: break-all属性即可。　　问题五：　　placeholder在某些低端安卓手机上设置了text-align:right无效。　　解决方法：　　在input::input-placeholder里设置direction:rtl，可以达到文本text-align:right的效果。
搜索风云榜
51Testing官方微信
51Testing官方微博
测试知识全知道

我要回帖

更多关于 touchend事件无法触发 的文章

 

随机推荐