阅读520 返回首页    go 阿里云 go 技术社区[云栖]

ios上safari的事件模型(一)

safari在desktop端和mobile端大部分的功能都是一样，我们重点说下差别在什么地方，以及这些差别所引起的问题。我们知道ios在mobile端增加了触摸的功能，触摸功能肯定要用到手指的操作，这个是和desktop端有很大区别的。当我们用手指操作的时候，可能用到一个手指，两个手指或者多个手指，同时手指触摸到不同的dom元素会引起什么不同的行为，我们主要围绕这些问题展开。

名词解释：

clickable元素：link,form,image和拥有mousemove, mousedown, mouseup, or onclick处理器的其他元素；

scrollable元素：text area,iframe和拥有overflow样式的其他元素；


一个手指操作时的事件

当一个手指按住屏幕并且在屏幕上移动不会发生任何事件，直到停止移动，会有onscroll事件产生，然后页面重绘，如下图：

pastedGraphic.pdf

当一个手指快速的在屏幕上双击，也不会产生任何事件，如下图：

               

当一个手指点击一个 nonclickable元素时，不会产生任何事件；如果点击的是一个clickable元素，事件发生的顺序为mouseover, mousemove, mousedown, mouseup, and click，但再点击到另外一个clickable元素时，会发生mouseout事件，如果在mousemove事件发生时有页面的内容发生变化，就不会有后续的事件发生，如下图：

               

两个手指操作时的事件

当两个手指在屏幕上使用捏住或者分开的手势时，不发生任何鼠标事件，如下图

                     

当两个手指按住一个 scrollable元素，并且同时移动两个手指， mousewheel 事件产生；如果元素不是scrollable元素，不产生事件；当停止移动时，onscroll事件产生，如下图：

                             

多点触摸事件

我们是可以使用javascript dom中的touch event类，来控制多点触摸和手势事件,主要通过下面几个事件来控制：

  • touchstart - 当touch事件初始化触发. 等同于 mouseDown事件
  • touchmove - 当touch移动时触发，等同于 mouseMove事件
  • touchend - 当touch结束时触发，等同于mouseUp. 

     发生事件的 event对象会包含下面的数组：

  • touches - 包含touchstart,touchmove事件的信息
  • targetTouches - 包含绑定touch事件的元素的信息，和touches区别，见这里
  • changedTouches - 包含所有touch事件的信息

     数组中中每个对象是一个touch对象，其就是safari里定义的一个对象，但是这里这个对象不等同于实际触摸点击的html元素，主要会包括如下属性：

pageX                                 相对于父元素的x坐标
pageY                                 相对于父元素的y坐标
clientX                                 相对于当前窗口的x坐标
clientY                                 相对于当前窗口的y坐标
identifier                              都是一些数字，用法暂时还不清楚
screenX                               相对于当前屏幕的x坐标
screenY                               相对于当前屏幕的y坐标
target                                    指代当前点击的对象

手势事件

多点触摸事件可以模拟手势事件，如放大，旋转等，主要包括下面几个api

  • gesturestart -当多点触摸初始化时触发
  • gesturechange - 等多点触摸移动时触发
  • gestureend - 当多点触摸结束时触发

      手势事件的对象中没有touch对象，他会包含scale,rotation这样的属性；

如：document.addEventListener('gesturechange', function(event) {

    event.preventDefault();

    console.log("Scale: " + event.scale + ", Rotation: " + event.rotation);

}, false);

这里对ios中的safari的事件模型做了一个全面的介绍，那么使用过程中会遇到哪些问题，以及具体的解决方案我们会在下篇文章介绍


参考：

handling events

JavaScript Touch and Gesture Events iPhone and Android

Touching and Gesturing on the iPhone

safari里的touch事件解析









最后更新：2017-04-02 16:47:59

  上一篇：go MyEclipse中文件被外编辑器修改后需要在MyEclipse中refresh
  下一篇：go 二进制兼容原理 - C/C++ &Java