1. 触屏事件概述
移动端浏览器兼容性比较好,我们不需要考虑JS的兼容性问题,可以放心的使用原生的JS写效果,但是 移动端也有自己独特的地方,比如触屏事件touch
(也称触摸事件),Android
和IOS
都有。 touch
对象代表一个触摸点
。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或触控板操作。
2. 常见的触屏事件
touchstart
事件:js">当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发
touchmove
事件:js">当手指在屏幕上滑动的时候连续地触发
在这个事件发生期间,调用`preventDefault()` 事件可以阻止滚动
touchend
事件:js">当手指从屏幕上离开的时候触发
touchcancel事件
:js">当系统停止跟踪触摸的时候触发
关于这个事件的确切出发时间,文档中并没有具体说明,咱们只能去猜测了
序号 事件 描述 1 touchstart 手指触摸到一个DOM元素时触发 2 touchmove 手指在一个DOM元素上滑动时触发 3 touchend 手指从一个DOM元素上移开时触发 3 touchcancel 当系统停止跟踪触摸的时候触发
3. 触摸事件对象(TouchEvent
)
TouchEvent
对象中有以下属性:
序号 事件 描述 1 touches 正在触摸屏幕的所有手指的一个列表 2 targetTouches 正在触摸当前DOM元素上的手指的一个列表(常用) 3 changedTouches 手指状态发生了改变的列表,从无到有,从有到无变化
手指移动元素案例:js">
const div = document. querySelector ( 'div' )
let startX = 0
let startY = 0
let boxX = 0
let boxY = 0
div. addEventListener ( 'touchstart' , function ( e) {
startX = e. targetTouches[ 0 ] . pageX
startY = e. targetTouches[ 0 ] . pageY
boxX = this . offsetLeft
boxY = this . offsetTop
} )
div. addEventListener ( 'touchmove' , function ( e) {
this . style. left = e. targetTouches[ 0 ] . pageX - startX + boxX + 'px'
this . style. top = e. targetTouches[ 0 ] . pageY - startY + boxY + 'px'
e. preventDefault ( )
} )
4. 事件详解
上面的这些事件都会冒泡,也都可以取消。 虽然这些触摸事件没有在DOM规范中定义,但是它们却是以兼容DOM的方式实现的。 所以,每个触摸事件的event对象都提供了在鼠标实践中常见的属性: bubbles
(起泡事件的类型) cancelable
(是否用 preventDefault() 方法可以取消与事件关联的默认动作) clientX
(返回当事件被触发时,鼠标指针的水平坐标) clientY
(返回当事件触发时,鼠标指针的垂直坐标) screenX
(当某个事件被触发时,鼠标指针的水平坐标) screenY
(返回当某个事件被触发时,鼠标指针的垂直坐标)。 除了常见的DOM属性,触摸事件还包含下面三个用于跟踪触摸的属性。 touches
:表示当前跟踪的触摸操作的touch对象的数组。 targetTouches
:特定于事件目标的Touch对象的数组。 changeTouches
:表示自上次触摸以来发生了什么改变的Touch对象的数组。 每个Touch对象包含的属性如下: clientX
:触摸目标在视口中的x坐标。 clientY
:触摸目标在视口中的y坐标。 identifier
:标识触摸的唯一ID。 pageX
:触摸目标在页面中的x坐标。 pageY
:触摸目标在页面中的y坐标。 screenX
:触摸目标在屏幕中的x坐标。 screenY
:触摸目标在屏幕中的y坐标。 target
:触目的DOM节点目标。
5. 示例
js">function load ( ) {
document. addEventListener ( 'touchstart' , touch, false ) ;
document. addEventListener ( 'touchmove' , touch, false ) ;
document. addEventListener ( 'touchend' , touch, false ) ;
function touch ( event) {
var event = event || window. event;
var oInp = document. getElementById ( "inp" ) ;
switch ( event. type) {
case "touchstart" :
oInp. innerHTML = "Touch started (" + event. touches[ 0 ] . clientX + "," + event. touches[ 0 ] . clientY + ")" ;
break ;
case "touchend" :
oInp. innerHTML = "<br>Touch end (" + event. changedTouches[ 0 ] . clientX + "," + event. changedTouches[ 0 ] . clientY + ")" ;
break ;
case "touchmove" :
event. preventDefault ( ) ;
oInp. innerHTML = "<br>Touch moved (" + event. touches[ 0 ] . clientX + "," + event. touches[ 0 ] . clientY + ")" ;
break ;
}
}
}
window. addEventListener ( 'load' , load, false ) ;
6. 移动端拖动元素
7. 移动端click延时问题
移动端 click 事件会有 300ms 的延时,原因是移动端屏幕双击会缩放页面,所有点击第一下的时候,会等待看有没有点击 第二下。
7.1 解决双击延时问题
禁用缩放,浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。
< mate name = ' viewport' content = ' user-scalable=no' >