参考文档:
- TouchEvent触摸事件:https://developer.mozilla.org/zh-CN/docs/Web/API/TouchEvent
- Touch触摸对象属性:https://developer.mozilla.org/zh-CN/docs/Web/API/Touch
- 触摸事件的类型
- touchstart:触摸绑定此事件的元素时触发
- touchmove:在绑定此事件的元素中滑动时触发(滑动开始的位置需要在该元素上,滑动结束的位置不在该元素上也行)
- touchend:离开绑定此事件的元素时触发(滑动开始的位置需要在该元素上,滑动结束的位置不在该元素上也行)
- touchcancel:触摸被中断时触发(如被短信,提示等)
- TouchEvent属性
- changedTouches:包含了代表所有从上一次触摸事件到此次事件过程中,状态发生了改变的触点的 Touch 对象。
- targetTouches :当前元素的触发点集合
- touches:页面上所有触发点集合。
- touch对象属性(属于TouchList中的一个)
- pageX,pageY:基于页面(视口)的坐标
- clientX,clientY:基于浏览器窗口(视口)的坐标
- screenX,screenY:基于屏幕的坐标
-
移动端绑定事件
element.addEventListener(event, function [, useCapture] )
-
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width:200px; height: 200px; background-color: pink; margin:0 auto; } </style> </head> <body> <div class="box"></div> <script> window.onload = function(){ console.log(TouchList); var box = document.querySelector(".box"); box.addEventListener('touchstart', function(){ console.log('start'); console.log(event); console.log(event.changedTouches); /*console.log(event.touches);*/ }); box.addEventListener('touchmove', function(){ console.log('move'); console.log(event); console.log(event.changedTouches); /*console.log(event.changedTouches[0].clientX);*/ }); box.addEventListener('touchend', function(){ console.log('end'); console.log(event); console.log(event.changedTouches); /*console.log(event.touches);*/ }); } </script> </body> </html>