本文俺将向大家介绍js中处理touch事件的基本知识。
触摸事件是在移动设备(如智能手机或平板电脑)上查看页面时触发的事件。
它们允许您跟踪多点触摸事件。
我们有4个触摸事件:
-
touchstart触摸事件已经启动(触摸表面) touchend一个触摸事件已经结束(表面不再被触摸)touchmove触摸移动手指(或任何接触设备的东西)在表面移动touchcancel触摸事件已被取消
每当一个触摸事件发生，会触发一个触摸事件:
/**
* 前端教程网
* https://www.pipipi.net/
*/
const link = document.getElementById('my-link')
link.addEventListener('touchstart', event => {
// touch event started
})以下是我们可以访问该事件的所有属性:
- identifier 标识符此特定事件的唯一标识符。用于跟踪多点触摸事件。相同的手指=相同的标识符。
- clientX / clientY 无论是否滚动，鼠标指针相对于浏览器窗口的x和y坐标
- screenX / screenY 屏幕坐标中鼠标指针的x和y坐标
- pageX / pageY 页面坐标(包括滚动)中鼠标指针的x和y坐标
- 目标被触及的元素