HTML5触摸事件（多点触控、单点触控）Demo

HTML5的触摸API支持处理单点和多点的触摸事件处理。

接口

1、TouchEvent：代表了一个触摸事件。

主要属性：

TouchEvent.changedTouches：一个TouchList对象。代表了所有上一个接触点到当前点状态发生变化的点。

TouchEvent.touches：一个TouchList对象。代表的所有当前触摸点，不管目标或者状态是否改变。

TouchEvent.type：触摸事件类型。有touchstart、touchend、touchmove、touchenter、touchleave和touchleave。

2、Touch：代表一个单独的触摸点。

主要属性：Touch.identifier：这个触摸对象的唯一标识。

3、TouchList：代表一组触摸点。比如同时有多根手指放在在屏幕上面。

4、DocumentTouch：包含创建Touch和TouchList对象的方法。

触摸事件

touchstart：触摸的时候发生。
touchend：手指从屏幕抬起时发生。手指划出了屏幕也会触发这个事件。
touchmove：手指沿着屏幕滑动时触发。
touchenter：触摸点进入到一个元素。
touchleave：触摸点离开一个元素。
touchcancel：当触摸受到干扰而中断时触发。比如一个弹框，或者触摸点离开了文档窗口区域到了其他地方，或者触摸点超出了最大可支持的上限，那么最先的触摸将会退出。

下面一个跟踪多点触控的例子，允许用户同时多于一个手指画线，可以直接运行：

<!DOCTYPE html>
<html><head><title>Touch Test</title></head><body><canvas id="canvas" width="600" height="600" style="border:solid black 1px;">Your browser does not support canvas element.</canvas><br><br>Log: <pre id="log" style="border: 1px solid #ccc;"></pre><script type="text/javascript">document.body.onload = startup; //文档加载完毕触发var ongoingTouches = new Array(); //用来保存跟踪正在发送的触摸事件//设置事件处理程序function startup() {var el = document.getElementsByTagName("canvas")[0];el.addEventListener("touchstart", handleStart, false);el.addEventListener("touchend", handleEnd, false);el.addEventListener("touchcancel", handleCancel, false);el.addEventListener("touchleave", handleEnd, false);el.addEventListener("touchmove", handleMove, false);log("initialized.");}//处理触摸开始事件function handleStart(evt) {evt.preventDefault(); //阻止事件的默认行为log("touchstart.");var el = document.getElementsByTagName("canvas")[0];var ctx = el.getContext("2d");var touches = evt.changedTouches;for (var i=0; i < touches.length; i++) {log("touchstart:"+i+"...");ongoingTouches.push(copyTouch(touches[i]));var color = colorForTouch(touches[i]);ctx.beginPath();ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0,2*Math.PI, false);  // a circle at the startctx.fillStyle = color;ctx.fill();log("touchstart:"+i+".");}}//处理触摸移动事件function handleMove(evt) {evt.preventDefault();var el = document.getElementsByTagName("canvas")[0];var ctx = el.getContext("2d");var touches = evt.changedTouches;for (var i=0; i < touches.length; i++) {var color = colorForTouch(touches[i]);var idx = ongoingTouchIndexById(touches[i].identifier);if(idx >= 0) {log("continuing touch "+idx);ctx.beginPath();log("ctx.moveTo("+ongoingTouches[idx].pageX+", "+ongoingTouches[idx].pageY+");");ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);log("ctx.lineTo("+touches[i].pageX+", "+touches[i].pageY+");");ctx.lineTo(touches[i].pageX, touches[i].pageY);ctx.lineWidth = 4;ctx.strokeStyle = color;ctx.stroke();ongoingTouches.splice(idx, 1, copyTouch(touches[i]));  // swap in the new touch recordlog(".");} else {log("can't figure out which touch to continue");}}}//处理触摸结束事件function handleEnd(evt) {evt.preventDefault();log("touchend/touchleave.");var el = document.getElementsByTagName("canvas")[0];var ctx = el.getContext("2d");var touches = evt.changedTouches;for (var i=0; i < touches.length; i++) {var color = colorForTouch(touches[i]);var idx = ongoingTouchIndexById(touches[i].identifier);if(idx >= 0) {ctx.lineWidth = 4;ctx.fillStyle = color;ctx.beginPath();ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);ctx.lineTo(touches[i].pageX, touches[i].pageY);ctx.fillRect(touches[i].pageX-4, touches[i].pageY-4, 8, 8);  // and a square at the endongoingTouches.splice(idx, 1);  // remove it; we're done} else {log("can't figure out which touch to end");}}}//处理触摸对出事件function handleCancel(evt) {evt.preventDefault();log("touchcancel.");var touches = evt.changedTouches;for (var i=0; i < touches.length; i++) {ongoingTouches.splice(i, 1);  // remove it; we're done}}//选择颜色function colorForTouch(touch) {var r = touch.identifier % 16;var g = Math.floor(touch.identifier / 3) % 16;var b = Math.floor(touch.identifier / 7) % 16;r = r.toString(16); // make it a hex digitg = g.toString(16); // make it a hex digitb = b.toString(16); // make it a hex digitvar color = "#" + r + g + b;log("color for touch with identifier " + touch.identifier + " = " + color);return color;}//拷贝一个触摸对象function copyTouch(touch) {return { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY };}//找出正在进行的触摸function ongoingTouchIndexById(idToFind) {for (var i=0; i < ongoingTouches.length; i++) {var id = ongoingTouches[i].identifier;if (id == idToFind) {return i;}}return -1;    // not found}//记录日志function log(msg) {var p = document.getElementById('log');p.innerHTML = msg + "\n" + p.innerHTML;}</script></body>
</html>

文章参考地址及示例来源： https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Touch_events

HTML5触摸事件（多点触控、单点触控）Demo相关推荐

手机html5 tap事件,HTML5触摸事件演化tap事件介绍
触摸事件是移动浏览器特有的HTML5事件,虽然click事件在pc和移动端更通用,但是在移动端会出现300ms延迟,较为影响用户体验,300ms延迟来自判断双击和长按,因为只有默认等待时间结束以确定没 ...
html5里可移动线性进度条的类型怎么表示,HTML5触摸事件实现移动端简易进度条的实现方法...
这篇文章主要介绍了关于HTML5触摸事件实现移动端简易进度条的实现方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下前言 HTML中新添加了许多新的事件,但由于兼容性的问题,许多事件 ...
php 判断html5,html5触摸事件判断滑动方向的实现
这篇文章主要介绍了html5触摸事件判断滑动方向的实现的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考. 为了给触摸界面提供有力支持, 触摸事件提供了响应用户对触摸屏或者触摸板上操作的能 ...
HTML5触摸事件（多点、单点触控）
本文转自:http://www.360us.net/article/9.html HTML5的触摸API支持处理单点和多点的触摸事件处理. 接口 1.TouchEvent:代表了一个触摸事件. 主要属 ...
HTML5触摸事件演化tap事件
触摸事件是移动浏览器特有的HTML5事件,虽然click事件在pc和移动端更通用,但是在移动端会出现300ms延迟,较为影响用户体验,300ms延迟来自判断双击和长按,因为只有默认等待时间结束以确定没 ...
HTML5触摸事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
html5触摸事件判断滑动方向,H5触摸事件中如何判断用户滑动方向
这次给大家带来H5触摸事件中如何判断用户滑动方向,H5触摸事件中判断用户滑动方向的注意事项有哪些,下面就是实战案例,一起来看一下. 接口 TouchEvent TouchEvent 是一类描述手指在触 ...
android 单点跟长按的区别,单点触控和多点触控区别是什么?原理分析
描述导语:触屏手机.平板电脑等新型的智能设备的崛起,除了因为像安卓和ios这样的智能系统诞生的原因外,不可或缺的一个条件就是触摸屏幕的更新换代和多点触控技术的出现.下面我们就来介绍单点触控和多点触控 ...
html5 触摸滚动,html5的触摸事件
1.触摸事件有哪些 touchstart,touchmove,touchend 2.分别什么时候触发 touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发. touc ...

HTML5触摸事件（多点触控、单点触控）Demo

HTML5触摸事件（多点触控、单点触控）Demo相关推荐

最新文章

热门文章