1. touchmove事件对象的属性:
touches:表示当前跟踪的触摸操作的 Touch 对象的数组。
clientX:触摸目标在视口中的 x坐标。
clientY:触摸目标在视口中的 y坐标。
identifier:标识触摸的唯一 ID。
pageX:触摸目标在页面中的 x坐标。
pageY:触摸目标在页面中的 y坐标。
screenX:触摸目标在屏幕中的 x坐标。
screenY:触摸目标在屏幕中的 y坐标。
2. 利用setTimeout来进行节流
touchmove事件触发频率特别高的时候,很有可能导致页面甚至浏览器崩溃,因此,我们需要限制touchmove event handler的调用次数。
const timer = null
touchmoveHandler (e) {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
//actions...
}, 8)
}
第一次触发事件的时候,timer为空,于是timer设置了一个时间间隔。如果在这个时间间隔内,事件再次被触发,那么旧的定时器被清除,新的定时器重新设置事件间隔。
这样做的后果是,在一个事件被频繁被触发的情况下,始终以一个较为固定的频率去调用事件的handler,从而优化网页性能。









网友评论