移动WEB开发之JS内置touch事件[转]

时间 2019-11-12

标签移动 web 开发内置 touch 事件栏目无线繁體版

原文原文链接

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：

css

Javascript代码

.spirit { / * 方块的class名称*/
position: absolute;
width: 50px;
height: 50px;
background-color: red;
}

而后，在body下定义一个接收事件的容器，这里body的height必须是100%才能占满整个viewport：

html

Html代码

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

定义touchstart的事件处理函数，并绑定事件：

android

Javascript代码

// define global variable
var canvas = document.getElementByIdx_x_x_x(“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_x_x_x(“div”);
spirit.className = “spirit”;
spirit.style.left = startX;
spirit.style.top = startY;
canvas.a(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对象a到容器中。这样，当第一根手指放下的时候，一个红色的，50px见方的方块就放到屏幕上了。

    而后，咱们要开始处理手指在屏幕上移动的事件：

web

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事件。手指提起的时候方块从屏幕上移除。

编程

Javascript代码

function touchEnd(event) {
If (!spirit) return;
canvas.removeChild(spirit);
spirit = null;
}
canvas.addEventListener(“touchend”, touchEnd, false);

在你的ipad或者iphone上测试一下以上代码。若是不出意外的话，一个完整的多触式web程序就诞生了。。

这种事件处理模式虽然可以知足咱们开发多触式网页应用的需求，可是start – move – end的流程有点繁琐，能不能封装一些经常使用的动做让咱们用一个event handler就能解决问题呢。没错，Gesture事件就是为了这个目的设计出来的，它封装了手指的scale, slide, rotate等经常使用的动做。不过，下一章咱们再来讨论这个问题。。

附件是一个更加复杂一些的例子，每根手指放下的时候都会产生一个不一样颜色的方块，手指动的时候方块跟着动，手指提起的时候方块消失，请下载查看试用。

经过附件所包含的实例，咱们能够看出一些较为隐蔽的特性。首先，这里咱们没有再使用event.touches取全部touch的对象，而是使用 event.changedTouches这个数组，用来取得全部跟本次事件相关的touch。可是，这里我发现一个奇怪的特性，不知道是个人ipad有问题仍是原本就是这样，就是在有多根手指放在屏幕上的时候，若是提起一根手指，touchend事件的changedTouches中会包含全部手指的 touch对象，而后，其余几根留在屏幕上的手指会从新触发touchstart，并刷新全部的touch对象（identifier都不同了）。若是这是一个全部设备都有的特性，那么将给编程者带来一些不便，不知道水果为啥要这么处理。

对touch event的介绍咱们点到为止，这里给你们推荐两篇文档：

Safari dom additions reference: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariJSRef/Intro/Intro.html#//apple_ref/doc/uid/TP40001482-CH2g-BAJDAJAG

Safari web content guide:

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/Introduction/Introduction.html canvas