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>
效果演示