移动端 touchend不触发 Bug

作者:杨润炜
日期:2016/1/6 15:34

phone touch

问题概述

最近在做一些移动端页面,需要对触摸事件进行监听处理。在PC上用chrome模拟手机开发了第一个版本后并测试完成后,再在手机上进行最后的真机测试。结果是,程序对触摸事件的监听处理在苹果手机上表现正常,而在安卓平台上则出现部分手机表示异常。实际调试结果表明,出现异常的原因在于,这部分安卓手机上的touchend监听事件不触发。

解决方法

首先我是找寻网上别人的经验,果然在知乎上有个问答有关于这个问题的讨论。具体原因是:

On Android ICS if no preventDefault is called on touchstart or the first touchmove, further touchmove 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.

我的解决方法是:

在touchstart的handle中使用event.preventDefault(), 即可让touchend事件正常触发

延伸部分

上述方法虽然可以回避touchend不触发的bug,但也使得监听元素上的click事件无法被监听处理。我的解决方式是在touchend里对用户的动作进行分类,把点击事件分类出来,并进行另外处理。

具体代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. #touchArea {
  6. height: 300px;
  7. background-color: #eee;
  8. line-height: 300px;
  9. text-align: center;
  10. font-size: 3rem;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div id="touchArea">滑动我来吧!</div>
  16. <script type="text/javascript">
  17. var touchArea = document.getElementById('touchArea');
  18. var startX, endX, resX;
  19. var touchstart = function (e) {
  20. startX = e.changedTouches[0].clientX;
  21. e.preventDefault(); // 解决某些安卓客户端上touchend不触发bug
  22. };
  23. var touchend = function (e) {
  24. endX = e.changedTouches[0].clientX;
  25. resX = endX - startX;
  26. if (resX > 0) {
  27. // 向右滑动
  28. console.log('向右滑动');
  29. } else if (resX < 0) {
  30. // 向左滑动
  31. console.log('向左滑动');
  32. } else {
  33. // 点击
  34. console.log('点击');
  35. }
  36. };
  37. touchArea.addEventListener('touchstart', touchstart);
  38. touchArea.addEventListener('touchend', touchend);
  39. </script>
  40. </body>
  41. </html>

注:在移动端浏览器运行或PC用浏览器模拟手机端

感谢您的阅读!
如果看完后有任何疑问,欢迎拍砖。
欢迎转载,转载请注明出处:http://www.yangrunwei.com/a/14.html
邮箱:glowrypauky@gmail.com
QQ: 892413924

下一篇:我的2015