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

来源：互联网发布：百度惊雷算法编辑：程序博客网时间：2024/05/17 08:28

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 start                ctx.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 record                  log(".");                } 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 end                  ongoingTouches.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 digit              g = g.toString(16); // make it a hex digit              b = b.toString(16); // make it a hex digit              var 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

0 0