JS移动设备触摸事件API

最新推荐文章于 2022-06-10 09:32:36 发布

疯狂紫萧

最新推荐文章于 2022-06-10 09:32:36 发布

阅读量997

点赞数

分类专栏： JS&JQuery关

JS&JQuery关专栏收录该内容

48 篇文章 0 订阅

订阅专栏

JS移动设备触摸事件API

属性(Attribute)	描述(Description)
identifier	unique numeric identifier
target	指代当前点击的DOM对象
screenX	相对于当前屏幕的x坐标
screenY	相对于当前屏幕的y坐标
clientX	相对于当前窗口的x坐标
clientY	相对于当前窗口的y坐标
pageX	相对于父元素的x坐标
pageY	相对于父元素的y坐标

触摸手势事件

事件(Event)	描述(Description)
touchstart	当手指接触元素时触发等介于 mousedown
touchmove	当已经接触元素的手指开始移动后触发等介于 mousemove
touchend	当手指离开元素时触发等介于 mouseend 或 mouseup
touchcancel	当触摸被中断以后触发，例如触摸元素时手指滑向到元素之外的的区域

TouchLists

List	Description
touches	屏幕上所有的当前触摸
targetTouches	该事件是目标元素上的所有当前触摸
changedTouches	参与当前事件的所有触摸

触摸事件示例

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

 
 <div id="coords"></div>
<div id="touchzone"></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>

效果演示

疯狂紫萧

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS移动设备触摸事件API

属性(Attribute)描述(Description)identifierunique numeric identifiertarget指代当前点击的DOM对象screenX相对于当前屏幕的x坐标screenY相对于当前屏幕的y坐标clientX相对于当前窗口的
复制链接

扫一扫