JavaScript中的触摸事件和特殊事件

原创于 2020-03-31 22:08:40 发布 · 272 阅读

CC 4.0 BY-SA版权

文章标签：

本文详细解析了移动端触摸事件的工作原理，包括touchstart、touchend、touchmove等基本事件及其实现长按、轻触、左移等复杂交互的方法。同时介绍了transitionend和animationend事件在网页动画过渡中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

触摸事件用于移动端
touchstart：触摸开始
touchend：触摸结束
touchmove：触摸移动
其他事件实际就是这三个事件的组合使用

长按: 触摸开始和触摸结束之间的时间差大于一个数值（比如1秒或0.5秒）
，计算两个触发时时间戳的差。或者触发触摸开始事件，超过一个数值（比如1秒或0.5秒）
轻触 : 触摸时间差小于一个数值（一般是100毫秒）
左移 : 触摸开始与触摸结束的坐标差

特殊事件
transitionend：当过渡结束时执行
animationend：当动画结束时执行

var oDiv = document.querySelector('div');
oDiv.ontransitionend = function(){
console.log('过渡结束了')
}