移动互联网终端的touch事件和click事件

发表于 2010 年 06 月 02 日由 allenm

昨天晚上学习并分享了手持设备浏览器的 touchstart, touchend, touchmove 事件，突然又想到这个事件和 click 事件在应用的过程中是否会有冲突呢？

如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP，这个页面上肯定是有很多可点击区域的，如果用户触摸到了那些可点击区域怎么办呢？

带着这些疑问，我测试了我的 Android 1.5，发现系统已经很好的帮我们处理好了，具体说来，当明显的手指在屏幕上滑动，是不会触发 click 事件的，当明显的点击的时候，同时出发 click 事件和 touch类事件。有了这些我们已经很方便的控制程序来做我们想做的事情了，我们可以通过 touchstart事件和 touchend 事件的 pageX,pageY属性来判断用户到底是想做什么操作了，如果偏移值很大，很明显的就是滑动操作了，如果偏移很短，就不做操作，这个时候很有可能是会触发click事件了。

测试例子在：http://lab.allenm.me/touch_click.html，和上一篇文章一样，你可以使用你的移动手持设备去访问，测试。

此条目发表在 android, javascript 分类目录，贴了 android, click, touchend, touchstart 标签。将固定链接加入收藏夹。

《移动互联网终端的touch事件和click事件》有 6 条评论

Easy 说：

2011 年 04 月 15 日上午 6:43

请问哪里还能看到您的演示？谢谢

回复
- allenm 说：
  
  2011 年 04 月 15 日上午 6:48
  
  等我周一回去翻下放在家里的pc上的代码，上次换 VPS 的时候，忘记转移这个了。不好意思。
  
  回复
一无所有说：

2011 年 09 月 07 日上午 9:42

请问这个演示还有吗？很感谢您的分享

回复
welpher.yu 说：

2011 年 11 月 14 日上午 9:40

学习了，不过在移动设备上怎么调试呢

回复
danny_ddj 说：

2011 年 12 月 08 日上午 8:29

touchend是没有pageX和pageY属性的

回复
- allenm 说：
  
  2011 年 12 月 10 日下午 2:03
  
  这个是根据 10年的时候 android 1.5 测试出来的结果，现在的我不太清楚，很久没关注这个了
  
  回复

发表评论取消回复