jQuery提供了许多处理触摸事件的方法,可以在移动设备上优化用户体验。下面介绍几种常用的触摸事件:
// 绑定一个触摸开始事件$(document).on(touchstart, function (e) {console.log(e.touches[0].clientX);});// 绑定一个触摸移动事件$(document).on(touchmove, function (e) {console.log(e.touches[0].clientX);});// 绑定一个触摸结束事件$(document).on(touchend, function (e) {console.log(e.changedTouches[0].clientX);});
上面的代码分别绑定了触摸开始、移动和结束事件,并在控制台输出了触摸位置的X轴坐标。
需要注意的是,触摸事件和鼠标事件有些不同,触摸事件的触发顺序和鼠标事件不一样。如果您需要同时支持触摸和鼠标事件,可以使用on
方法的第三个参数{passive: false}
来禁止滑动事件的默认行为。例如:
// 绑定一个触摸开始事件$(document).on(touchstart mousedown, function (e) {console.log(e.clientX);});// 禁止滑动事件默认行为$(document).on(touchmove, function (e) {e.preventDefault();console.log(e.touches[0].clientX);}, {passive: false});// 绑定一个触摸结束事件$(document).on(touchend mouseup, function (e) {console.log(e.clientX);});
上面的代码使用了on
方法的第三个参数{passive: false}
,在滑动时禁止了默认的行为,同时支持了鼠标事件。需要注意的是,这种写法可能会影响性能,尤其是在移动设备上。