html5移动端:手机触控gesturestart(js)

原创 2016年08月31日 15:37:33
<!doctype html>
<html>
  <head>
<title>Mobile Cookbook</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
padding: none;
margin: none;
}
</style>
  <!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>-->
  </head>
  <body>
    <div id="a">手机旋转  jquery
    </div>
<script>
var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
alert(navigator.userAgent.match(/iPhone/i));
for (i=0; i<metas.length; 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<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=1.2, maximum-scale=1.2";
}
}
}
</script>
    

</body>

</html>


demo2:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>gesture</title>
    <meta name="viewport" content="width=device-width,user-scalable=no" />
</head>
<body>

<div id="output"></div>

<script>

    var output = document.getElementById('output');

    document.addEventListener('gesturestart', function (event) {
        output.innerHTML = 'Gesture started (rotation=' + event.rotation + ',scale='+event.scale + ')';
    },false);

    document.addEventListener('gestureend', function () {
        output.innerHTML = 'Gesture ended (rotation=' + event.rotation + ',scale='+event.scale + ')';
    },false);

    document.addEventListener('gesturechange', function (event) {
        output.innerHTML = 'Gesture changed (rotation=' + event.rotation + ',scale='+event.scale + ')';
    },false);

</script>
</body>
</html>

总结:


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方法,可以被用来阻止页面被移动。



 
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

js中的touch事件及gesture(手势)事件详解 — 第13.4.9节

一:touch事件分类? 1. touchstart:当手指触摸屏幕时触发。不管有多少个手指放在了屏幕上,只要再触摸一下屏幕就会触发。在此,我用小米的google浏览器做了一个实验,添加一个计数器,...

iPhone, Android等设备上的Touch和Gesture

本文翻译自:http://www.sitepen.com/blog/2011/12/07/touching-and-gesturing-on-iphone-android-and-more/译者:Si...

javascript手势操作插件 base-gesture.js

有人说,学习是一个重复造轮子的过程,so....。我也造了个轮子玩哟。 学习js有段时间了,一直想做点小东西之类的。之前有做过jquery插件之类的。。不过呢,还是想试用下原生js(感觉屌=一点。哈哈...

HTML5 手势检测原理和实现

前言 http://qianduan.guru/2016/08/13/gesture_detection_in_html5/?hmsr=toutiao.io&utm_medium=toutiao.i...

小强的HTML5移动开发之路(52)——jquerymobile中的触控交互

当使用移动设备进行触控操作时,最常用的就是轻击、按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为。一、轻击与按住直接上代码(一切皆在代码中,细细品吧!)...

【精品资源】mobile微商城、webAPP手机网站、基于HTML5+CSS3移动端web开发!!!

HTML5+CSS3(rem)+jQuery+zepto+webAPi 开发手机web - 移动端web网站(移动端web开发/APP开发)、移动端App模版 —— mobile微商城、webAP...

移动端webApp滚屏特效、HTML5+CSS3手机整屏滚动 、mobile网站翻页滚屏特效!

HTML5+CSS3动画滚屏,jQuery触摸手机全屏上下滑动滚屏特效,JS+css3实现手机端滚屏效果,移动端制作满屏滚动效果, 移动端web网站(移动端web开发/APP开发)、移动端App模版、...

HTML5移动端手机网站开发流程

最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难。为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗?其实手机网站就是一个微缩版的PC网...

html5中canvas画布实现手机端和移动端的刮刮乐效果

用html5中的canvas实现刮刮乐的效果 使用html+css实现背景的样式 使用clearRect()方法实现挂去的作用 手机端使用addEventListener()监听 手机端滑动事件tou...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)