touchcancel事件什么时候会触发

司马朝阳提问于 2026-01-25 03:00:14 阅读 41

移动

最近在做一个基于触摸的拖拽功能，发现有时候拖着拖着就突然停止了，看控制台输出才注意到是触发了touchcancel。这个事件一般什么情况下会被触发呢？

触摸事件

我来解答赞 9 收藏

反馈

1 条解答

东方亚捷 Lv1

touchcancel 一般在以下几种情况会触发：

1. 触摸超时，比如手指按着时间太长
2. 触摸点超出浏览器可视区域
3. 系统接管了触摸事件（比如弹出虚拟键盘）
4. 同时触点多于设备支持的最大值

复制这个简单示例测试一下：

document.addEventListener('touchcancel', (e) => {

    console.log('touchcancel triggered');

});



document.addEventListener('touchstart', (e) => {

    console.log('touchstart');

});



document.addEventListener('touchend', (e) => {

    console.log('touchend');

});

调试的时候多看看控制台输出，基本就能定位是哪种情况导致的。拖拽功能确实挺容易碰到这个问题，尤其是复杂手势场景下。

2026-01-28 17:52