触屏事件
1.兼容DOM的触摸事件
- touchstart — 当手指触摸屏幕时触发
- touchmove — 当手指在屏幕上滑动时连续触发
- touchend — 当手指从屏幕上移开时触发
- touchcancel — 当系统停止跟踪触摸时触发
上述事件都会冒泡,也都可以取消。每个触摸事件的event对象都提供了在鼠标事件中常见的属性bubbles cancelable view clientX clientY screenX screenY等
2、每个触摸事件包含的三个触摸列表
- touches — 当前跟踪的触摸操作的Touch对象的数组
(当前屏幕上的所有手指动作的列表) - targetTouches — 特定于事件目标的Touch对象的数组
(当前DOM元素的手指动作的列表) - changeTouches — 自上次触摸以来发生哪些改变的Touch对象的数组
(当前事件的手指动作的列表) - 每个touch对象包含的属性
- clientX — 触摸目标在视口中的x坐标
- clientY — 触摸目标在视口中的y坐标
- pageX — 触摸目标在页面中的x坐标
- pageY — 触摸目标在页面中的y坐标
- screenX — 触摸目标在屏幕中的x坐标
- screenY — 触摸目标在屏幕中的y坐标
- identifier — 标识触摸的唯一ID (一个数字,用于唯一标识触摸会话中的当前手指)
- target — 触摸的DOM节点目标
移动端触摸变清晰案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">