touchcancel事件什么时候会触发

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

移动

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

触摸事件

我来解答赞 12 收藏

反馈

2 条解答

爱学习的绍博 Lv1

touchcancel 这个事件在移动端开发里其实挺常见的，尤其是做拖拽、滑动这类手势操作时，它 basically 就是系统“强制打断”你当前触摸操作的信号。

前端这块，常见触发场景有这几个：

一个是用户手指滑出当前元素的边界，比如你在

里 touchstart + touchmove 拖动，结果手指滑出去了，浏览器可能就给你来个 touchcancel；

再一个就是多点触控时，如果某个手指被其他手指“覆盖”了（比如先用两指在屏幕上操作，突然第三根手指按下去），系统可能会取消之前的某些触摸序列；

还有就是 App 切换、弹系统级弹窗（比如来电、短信通知）、浏览器标签页被切到后台、甚至手机锁屏，这些都会导致当前的 touch 会话被中断，触发 touchcancel；

另外有些机型（特别是国产定制 ROM）对触摸事件的处理比较激进，比如滑动过快、或者页面滚动和拖拽冲突时，也可能直接 cancel 掉你的 touchmove。

建议你处理 touchcancel 的时候，别光打印个日志就完了，最好也做清理：比如重置拖拽状态、移除绑定的事件监听、恢复 UI 样式（比如把半透明的拖拽元素还原），不然下次再操作可能就乱套了。我之前踩过坑，没处理好 touchcancel，结果拖拽完后元素还“粘”在手指上动不了，特别尴尬。

2026-02-23 19:01

东方亚捷 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