初次使用touch事件心得

最新推荐文章于 2024-08-19 19:47:14 发布

wjqiu

最新推荐文章于 2024-08-19 19:47:14 发布

阅读量3.1k

点赞数

分类专栏： HTML5 js

本文链接：https://blog.csdn.net/wjqiu/article/details/45083473

版权

HTML5 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

关于初次使用touch事件心得

touchstart和touchmove需使用e.originalEvent.changedTouches

而touchend事件需使用e.originalEvent.changedTouches[0]

另外，touch事件优先级高于click事件，若需要使用click事件，可通过设置检查pageX pageY的变化较小时触发相关执行函数

附上网页查找的资料

==========================================================================================================

本文从一个多触式网页开发初学者的角度，首先简单介绍一下iOS上的浏览器（这里主要指Safari）所支持的
多触式事件模型，然后将触控（Touch）这种简单的动作升级为手势（Gestrue），最后将javascript + html +
css构建的应用脱离浏览器，放到iOS设备的屏幕上成为一个本地link并和植物大战僵尸放到一起。
iOS上的Safari也支持click 和mouseover等传统的交互事件，只是不推荐在iOS的浏览器应用上使用click和
mouseover，因为这两个事件是为了支持鼠标点击而设计出来的。Click事件在iOS上会有半秒左右的延迟，原
因是iOS要highlight接收到click的element。而mouseover/out等事件则会被手指的点击触发。所以，在iOS上
，应当抛弃传统的交互事件模型而接受一个新的事件模型。Touch事件和更高级的Gesture事件，能让你的网页
交互起来像native应用一样。
处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件：

touchstart: // 手指放到屏幕上的时候触发
touchmove: // 手指在屏幕上移动的时候触发
touchend: // 手指从屏幕上拿起的时候触发
touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详。。
Gesture事件则是对touch事件的更高级的封装，主要处理手指slide、rotate、scale等动作，将在下一篇文章
详述。
在开始描述touch事件之前，需要先描述一下多触式系统中特有的touch对象（android和iOS乃至nokia最新
的meego系统都模拟了类似的对象，这里只针对iOS，因为我只有iPad可用于测试。。）。这个对象封装一次
屏幕触摸，一般来自于手指。它在touch事件触发的时候产生，可以通过touch event handler的event对象取到
（一般是通过event.changedTouches属性）。这个对象包括一些重要的属性：

client / clientY：// 触摸点相对于浏览器窗口viewport的位置
pageX / pageY：// 触摸点相对于页面的位置
screenX /screenY：// 触摸点相对于屏幕的位置
identifier： // touch对象的unique ID
CSS代码

.spirit { /* 方块的class名称*/
position: absolute;
width: 50px;
height: 50px;
background-color: red;
}
然后，在body下定义一个接收事件的容器，这里body的height必须是100%才能占满整个viewport：

Html

<body style=”height: 100%;margin:0;padding:0”>

<div id=”canvas” style=”position: relative;width:100%;height: 100%;”></div>

</body>
定义touchstart的事件处理函数，并绑定事件：

Javascript代码

// define global variable

var canvas = document.getElementById(“canvas”),
spirit, startX, startY;
// touch start listener

function touchStart(event) {
event.preventDefault();
if (spirit ||! event.touches.length) return;
var touch = event.touches[0];
startX = touch.pageX;
startY = touch.pageY;
spirit = document.createElement(“div”);
spirit.className = “spirit”;
spirit.style.left = startX;
spirit.style.top = startY;
canvas.appendChild(spirit);
}

// add touch start listener
canvas.addEventListener(“touchstart”, touchStart, false);
首先，我们将方块spirit作为一个全局对象，因为我们现在要测试单根手指所以屏幕上最好只有一个物体在移动

（等会有多触实例）。在touchStart这个事件处理函数中，我们也首先判断了是否已经产生了spirit，也就是是
否已经有一个手指放到屏幕上，如果是，直接返回。
和传统的event listener一样，多触式系统也会产生一个event对象，只不过这个对象要多出一些属性，比如
这里的event.touches，这个数组对象获得屏幕上所有的touch。注意这里的event.preventDefault()，在传统的
事件处理函数中，这个方法阻止事件的默认动作，触摸事件的默认动作是滚屏，我们不想屏幕动来动去的，所
以先调用一下这个函数。我们取第一个touch，将其pageX/Y作为spirit创建时的初始位置。接下来，我们创建
一个div，并且设置className，left，top三个属性。最后，我们把spirit对象appendChild到容器中。这样，
当第一根手指放下的时候，一个红色的，50px见方的方块就放到屏幕上了。
然后，我们要开始处理手指在屏幕上移动的事件：

Javascript代码

function touchMove(event) {
event.preventDefault();
if (!spirit || !event.touches.length) return;
var touch = event.touches[0],
x = touch.pageX – startX,
y = touch.pageY – startY;
spirit.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';
}

Canvas.addEventListener(“touchmove”, touchMove, false);
在touch move listener中，我们使用webkit特有的css属性：webkitTransform来移动方块，这个属性具体怎么用请google之。建议构造面向iOS设备的网页的时候尽量使用webkit自己的特性，不但炫，更可以直接利用硬件来提高性能。

最后，我们处理touchend事件。手指提起的时候方块从屏幕上移除。

function touchEnd(event) {
If (!spirit) return;
canvas.removeChild(spirit);
spirit = null;
}

canvas.addEventListener(“touchend”, touchEnd, false);