toby

touch事件

测试平台: ipad mini + ios7
测试浏览器: safari7,chrome 32
测试代码:http://jsbin.com/xuxum/2/

现象:

  1. touch事件与mouse事件的触发顺序(短按):

     touchstart-touchend-(delay)-mouseover-mousemove-mousedown-mouseup-click
     # 点击其他可点击的元素的时候,触发当前元素的mouseout事件
    
  2. touch事件与mouse事件的触发顺序(长按),这里发现一个问题,a标签以及其他类似span或者div之类的标签所触发的事件不一致:

     可点击元素: touchstart-touchend-mouseover-mousemove-mousedown-mouseup-click
     其他: touchstart-touchend
     # 长按元素后即使点击其他可点击的元素,也不触发当前元素的mouseout事件
    
  3. 快速双击元素,不触发mouse事件

  4. 不可点击元素长按同样无法触发mouse事件

  5. 手指在屏幕上移动,不会触发大量的mousemove事件。但是手指在元素上移动,即使手指移出元素,同样触发元素的touchmove事件

  6. 手指在屏幕上缓慢移动时,提起手指才会触发mouse事件,如果手指快速移动,则提起手指不会触发任何mouse事件

  7. touch事件的任意一个事件调用e.preventDefault()都将不会触发mouse事件

ps:移动端对于ui更新的处理会影响事件的触发,建议对于耗时任务(增添修改dom),使用setTimeout让出时间片.

ps2: 在touchend中执行alert会有再次触发touchstart的情况,解决同样使用setTimeout异步alert

参考来源:http://www.cnblogs.com/hokyhu/archive/2012/01/18/2325833.html