JS移动设备触摸事件API

向右看齐 2022-08-27 05:47 200阅读 0赞

JS移动设备触摸事件API

<table style="border-spacing:0px; background-color:transparent; font-size:12px; color:rgb(119,119,119); max-width:100%; width:728px; margin-bottom:10px; border-width:1px 1px 1px 0px; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-top-color:rgb(221,221,221); border-right-color:rgb(221,221,221); border-bottom-color:rgb(221,221,221)"> 
 <thead style=""> 
  <tr style=""> 
   <th style="margin:0px; padding:8px; line-height:20px; vertical-align:bottom; border-top-width:0px; border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> 属性(Attribute)</th> 
   <th style="margin:0px; padding:8px; line-height:20px; vertical-align:bottom; border-top-width:0px; border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> 描述(Description)</th> 
  </tr> 
 </thead> 
 <tbody style=""> 
  <tr style=""> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> identifier</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> unique numeric identifier</td> 
  </tr> 
  <tr style=""> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> target</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> 指代当前点击的DOM对象</td> 
  </tr> 
  <tr style=""> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> screenX</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> 相对于当前屏幕的x坐标</td> 
  </tr> 
  <tr style=""> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> screenY</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> 相对于当前屏幕的y坐标</td> 
  </tr> 
  <tr style=""> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> clientX</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> 相对于当前窗口的x坐标</td> 
  </tr> 
  <tr style=""> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> clientY</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> 相对于当前窗口的y坐标</td> 
  </tr> 
  <tr style=""> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> pageX</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> 相对于父元素的x坐标</td> 
  </tr> 
  <tr style=""> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> pageY</td> 
   <td style="margin:0px; padding:8px; line-height:20px; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> <p>相对于父元素的y坐标</p> </td> 
  </tr> 
 </tbody> 
</table>

触摸手势事件

TouchLists

触摸事件示例

我们定义了一个div，并且加上了一个简单的触摸时间监听来获取元素触摸位置

`#coords`用来记录触摸坐标 js 代码

function init() { 
       
       var touchzone = document.getElementById("touchzone");
       // 添加一个touchstart事件
       touchzone.addEventListener("touchstart", touchHandler, false);
       }

touchHandler 处理函数：

function touchHandler(event) { 
        
       var coords = document.getElementById("coords");
       // 监听触摸坐标位置
       coords.innerHTML = 'x: ' + event.touches[0].pageX + ', y: ' + event.touches[0].pageY;
       }

事件演示 你可以不停的触摸右侧演示元素 来获取触摸的位置

x: 688, y: 2094

显示元素上的 所有触控点

html dom

<canvas id="mycanvas" width="662" height="373" style="border: 1px solid #ccc">
       Canvas element not supported<br />
       </canvas>

javascript

//获取元素
       var canvas = document.getElementById('mycanvas');
       // 2d canvas
       var ctx = canvas.getContext("2d");
       // 为了让我们看清楚点击位置 所以需要绘制触控点
       ctx.fillRect(event.touches[0].pageX-offset.left, event.touches[0].pageY-offset.top, 5, 5);

完整的页面源码:

<!DOCTYPE html>
       <html>
       <head>
       <title>HTML5 input </title>
       <script>
       
       function init() { 
       var touchzone = document.getElementById("mycanvas");
       touchzone.addEventListener("touchstart", draw, false);
       }
       
       function draw() { 
       var canvas = document.getElementById('mycanvas');
       
       if(canvas.getContext) { 
       var ctx = canvas.getContext("2d");
       ctx.fillRect (event.touches[0].pageX, event.touches[0].pageY, 5, 5);
       }
       }
       </script>
       
       </head>
       <body onload="init()">
       <canvas id="mycanvas" width="500" height="500">
       Canvas element not supported.
       </canvas>
       </body>
       </html>

效果演示