html5 gesturestart,html5移动端：手机触控gesturestart（js）

Mobile Cookbook

html, body {

padding: none;

margin: none;

}

手机旋转  jquery

var metas = document.getElementsByTagName('meta');

var i;

if (navigator.userAgent.match(/iPhone/i)) {

alert(navigator.userAgent.match(/iPhone/i));

for (i=0; i

if (metas[i].name == "viewport") {

metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";

}

}

document.addEventListener("gesturestart", gestureStart, false);

}

function gestureStart() {

alert("放大");

for (i=0; i

if (metas[i].name == "viewport") {

metas[i].content = "width=device-width, minimum-scale=1.2, maximum-scale=1.2";

}

}

}

demo2:

gesture

总结：

js gesture事件在安卓机子上测试没有反应；只在苹果正常，汗~~~

Apple在发布iPhone的同时引入了两种新的事件概念：touch和gesture。Touch用来保存有多少手指接触在屏幕上以及这些触点的位置、触点的状态。Gesture则是用来描述用户在交互时到底做了哪些更高层次上的行为，比如：pinching，rotating，swiping，double-tapping等等。 Touch事件在众多平台上都得到支持(最初在iOS上建立起的touch事件模型已被作为标准写入W3C Touch Events specification)，而原生的Gesture事件在很多地方都没有得到支持，在iOS上的Gesture事件也仅限于其平台支持的少量gesture。 Touches 当你将一个手指放到屏幕上时，将触发Touch事件的生命周期。每次手指触摸屏幕，一个新的touchstart事件将会产生。每次手指离开，一个touchend事件将会触发。如果你触摸屏幕并移动手指，那touchmove事件将会触发。如果有太多手指触摸屏幕或者有另一个行为(比如说手机操作系统的信息推送) 打断了touch，一个touchcancel 事件会被触发。 Touch事件列表: touchstart: 当手指触摸到屏幕时被触发 touchend: 当手指离开屏幕时被触发 touchmove: 当手指在屏幕上移动时被触发 touchcancel: 当Touch被打断或是有太多手指触摸屏幕时被触发。 虽然看起来Touch事件和Mouse事件之间有一一对应的关系，手指移动就如同使用光标一样，但事实上TouchEvent对象中并不包括那些你可能希望看到的内容。比如，pageX和pageY属性并没有被赋值。这是因为在使用鼠标时，你只有一个交互：光标。但在多点触摸的设备上，你可以在屏幕的左边同时按下两根手指并在屏幕的右边用另一根手指进行点击，这三个接触点都会被系统注册。 为了一次提供所有接触点的信息，每一个TouchEvent对象有一个保存着每个触点信息的属性。同时，它还有另外两个属性：其中一个保存着由当前目标节点触发的触点信息，另一个仅保存着当前事件相关的触点信息。 touches: 包含当前屏幕上每个触点信息的列表。 targetTouches: 和touches类似，但只包含在触发该Touch事件的节点上的触点信息。 changedTouches: 包含每个接触状态变化的触点信息的列表。 为了更好的理解这些列表，让我们来看一些例子。 当你将手指放到屏幕上，三个列表中的信息相同。 当你将第二根手指放到屏幕上，touches 将包含两个触点的信息。如果第二根手指放在第一根手指所在的节点上，targetTouches 将同样包含两个触点的信息，否则它将之包含第二个手指的触点信息。 changedTouches 将只包含第二个手指的触点信息，因为是由第二个手指的接触触发的此次Touch事件。 如果同时用两根手指接触屏幕，那changedTouches将包含着两个手指的触点信息。 如果你移动手指，唯一会发生变化的是changedTouches。它将包含所有移动手指的触点信息。 当你移开一根手指，它对应的触点信息将被从touches和targetTouches中移除，并会被添加到changedTouches列表中。 当你移开最后一根手指，touches和targetTouches列表将被清空，并且changedTouches将只包含最后一根手指的触点信息。 使用这些列表，可以比较清楚的了解用户到底在进行那些操作。想象一下做一个JavaScript版的超级玛丽——你会需要知道玩家在按哪个方向键，而在玩家想要发射火球或者跳跃时，你需要监控玩家到底是按在哪个虚拟的按钮上。 现在我们已经讨论了保存屏幕上手指触点信息的几个列表，但我们还没有谈到这些触点信息到底有哪些。这些触点信息包含一些和MouseEvent对象中类似的信息。下面是这些具体信息内容的列表： clientX: 触点相对于viewport的X坐标(不包括页面滚动的偏移量) clientY: 触点相对于viewport的Y坐标(不包括页面滚动的偏移量) screenX: 相对屏幕的X坐标 screenY: 相对屏幕的Y坐标 pageX: 触点相对于整个页面的X坐标 (包括页面滚动的偏移量) pageY: 触点相对于整个页面的Y坐标 (包括页面滚动的偏移量) identifier: 数字ID编号，用以区别每个触点。 target: 触点所在的DOM节点 为智能手机开发Web应用时很烦人的一点是即使你为你的应用设置好了viewport，在屏幕上移动你的手指可能会移动整个页面。幸运的是，touchmove事件对象有一个preventDefault方法，可以被用来阻止页面被移动。