移动端事件

随着智能手机的普及，使得移动端的开发越来越炙手可热，今天我们就来学习学习移动端的一些事件

1：click的300毫秒延迟响应

Click事件在移动手机开发会有300ms延迟，这个最主要还是iphone引起的：2007 年初。苹果公司在发布首款 iPhone前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。其中就有这个300ms的延迟响应。
假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。 
后来其他浏览器也就渐渐接受了这个约定，但是现在的智能手机高级的很，人们已经忍受不了一点的延迟、卡顿。那么有什么办法来解决呢？
这里我只讲一种方法，直接在``head``标签里添加这个``<meta name="viewport" content="width=device-width, user-scalable=no">``禁止缩放，简单粗暴，，哈哈，其他方法自行百度哈~

2：手势事件

``touchstart``：    当手指一放到屏幕上时触发
``touchmove``:        但手指在屏幕上滑动时，连续的触发
``touchend``:        当手指在屏幕上离开时触发
``touchcancel``:    当系统停止跟踪触摸的时候触发，如电话接入或者弹出信息，会取消当前的touch操作，即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。

由于触摸会导致屏幕动来动去，所以我们可以在这些事件中函数内部使用 event.preventDefault()来阻止掉默认事件(默认滚动)或者return false

触摸属性：
touches: 表示当前跟踪的触摸操作的touch对象的数组。————当一个手指在触摸屏上时，event.touches.length = 1;第二个手指在触摸屏上时，event.touches.length = 2,以此类推
targetTouches: 特定于事件目标的touch对象的数组。touch事件会毛冒泡，所以我们可以使用这个属性指出目标对象。
changedTouches: 表示上次触摸以来发生了什么改变的touch对象的数组,在一个touchend事件中，这就会是移开的手指

每个touch对象都包含了以下几个属性：

clientX 触摸目标在视口中的X坐标。

clientY 触摸目标在视口中的Y坐标。

Identifier 标示触摸的唯一ID。

pageX 触摸目标在页面中的X坐标。

pageY 触摸目标在页面中的Y坐标。

screenX触摸目标在屏幕中的X坐标。

screenY 触摸目标在屏幕中的Y坐标。

target  触摸的DOM节点目标,是动作所针对的目标。

3：触摸事件

Gestures
这个事件针对IOS设备上的，一个Gestures事件在两个或更多手指触摸屏幕时触发。如果任何手指你正在监听的Gesture事件(gesturestart，gesturechange，gestureend)节点上，你将收到对应的gestures事件。
Gesturesstart: 当一个手指已经按在屏幕上，而另一个手指又触摸在屏幕时触发。
Gesturechange: 当触摸屏幕的任何一个手指的位置发生改变的时候触发。
Gestureend: 当任何一个手指从屏幕上面移开时触发。

触摸事件和手势事件的之间关系
当一个手指放在屏幕上时，会触发touchstart事件，而另一个手指触摸在屏幕上时触发gesturestart事件，随后触发基于该手指的touchstart事件。
如果一个或两个手指在屏幕上滑动时，将会触发gesturechange事件，但是只要有一个手指移开时候，则会触发gestureend事件，紧接着会触发touchend事件。

手势专有属性
rotation: 表示手指变化引起的旋转角度，负值表示逆时针，正值表示顺时针，从0开始；
scale: 表示2个手指之间的距离情况，向内收缩会缩短距离，这个值从1开始的，并随距离拉大而增长。

4: 基本知识点

1. 自动大写与自动修正:要关闭这两项功能，可以通过autocapitalize 与autocorrect 这两个选项：(好像安卓上没用。。。)

   <input type="text" autocapitalize="off" autocorrect="off" />

2. 禁止用户选中文字(好像安卓上也没用。。。)：

   -webkit-touch-callout:none

3. 关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格

   this.value = this.value.replace(/\u2006/g, '');

4. Andriod 上去掉语音输入按钮

   input::-webkit-input-speech-button {display: none}

5：屏幕旋转事件

window.orientation :这个属性给出了当前设备的屏幕方向，0表示竖屏，正负90表示横屏（向左与向右）模式

onorientationchange : 在每次屏幕方向在横竖屏间切换后，就会触发这个window事件，用法与传统的事件类似

function orientationChange() {
   switch(window.orientation) {
       case 0:
       alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
       break;
       case -90:
       alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
       break;
       case 90:
       alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
       break;
       case 180:
       alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
       break;
   };
};
// 添加测试监听函数代码如下：
addEventListener('load', function(){
    orientationChange();
window.onorientationchange = orientationChange;
});

具体可以参考这篇博文 http://bbs.phonegap100.com/thread-28-1-1.html