HTML5触摸事件(多点、单点触控)

 提示:转载请注明原文链接

 本文永久链接:https://www.360us.net/article/9.html

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对象的方法。

 

触摸事件

  1. touchstart:触摸的时候发生。

  2. touchend:手指从屏幕抬起时发生。手指划出了屏幕也会触发这个事件。

  3. touchmove:手指沿着屏幕滑动时触发。

  4. touchenter:触摸点进入到一个元素。

  5. touchleave:触摸点离开一个元素。

  6. 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

 评论
昵称
邮箱
网址
最多500个字符