ios上safari的事件模型(一)

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

名词解释：

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

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

一个手指操作时的事件

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

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

               

当一个手指点击一个 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事件解析