移动端开发的touchcancel事件到底是怎么回事?

前端开发,移动端常用的touch事件大家都比较清楚,比如touchstart, touchmove, touchend等,但实际上还有一个touchcancel,这个比较少用,那到底是怎样一种机制呢?

移动端开发的touchcancel事件到底是怎么回事?

作为一个小白来讲,如果手指点击在元素上,然后不松开,直接把手指划到别的地方,再松开,这个时候希望触发touchcancel事件,于是就写了如下代码(只在手机端有效):

鼠标操作我

Event Log:

<p id="canvas" style="width:200px;height:100px;border:solid #ddd 1px;"> 鼠标操作我 </p> <p> Event Log: </p> <p id="log" style="width:200px;height:100px;border:solid #ddd 1px;overflow-y:auto;"> </p> <script> function log(message) { if(message == "__clear") { document.getElementById("log").innerHTML = ""; return; } document.getElementById("log").innerHTML += message +"<br />"; } function handleStart() { log('__clear'); log("start"); } function handleEnd() { log("end"); } function handleCancel() { log("cancel"); } function handleMove() { log("move"); } function startup() { var el = document.getElementById("canvas"); el.addEventListener("touchstart", handleStart, false); el.addEventListener("touchend", handleEnd, false); el.addEventListener("touchcancel", handleCancel, false); el.addEventListener("touchmove", handleMove, false); log("initialized"); } startup(); </script>

通过运行上面的代码,会悲催的发现,不仅没有按照预想的手指移开元素会触发,而且就算你怎么划,touchcancel事件都不会被触发。这到底是怎么回事,难道浏览器没有实现吗?

经过N多的尝试,加上看了很多文章,最后结论是可以触发,不过触发的时机不同的手机都可能不一样,差异还不小,不管这个事件是否有实际价值,先贴一些触发的场景吧:

iOS: 在按下或者移动的时候,如下操作会触发: 1.点击Home键 2.点击浏览器底部工具条 3.用你的手掌摩擦屏幕 4.按锁屏键 5.用四个或以上手指在屏幕上绘制手势,前提是系统支持的手势。 而下面的情况是不会触发的: 1.点击添加书签 2.点击前进后退按钮 3.点击或者聚焦到搜索地址栏 4.旋转手机 5.系统消息通知 6.按音量键 7.有电话来 ....
Android: 在按下或者移动的时候,如下操作会触发: 1.按锁屏键 2.随机的发生,没有直接原因,尤其是胡乱重复的点击和滑动屏幕的时候。 而下面的情况是不会触发的: 1.点击Home键 2.旋转手机 3.按音量键 ....

综上所述:这个touchcancel事件触发时机没有一个明确的规则,目前还想不到有实际的应用场景,或者一般来讲:touchstart, touchmove, touchend也就完全满足需求了。

相关阅读