Chrome Mobile 108中touchcancel事件未触发，替代事件是什么？

核心问题解答 #

当因超时导致触摸及后续click事件被取消时，在Chrome Mobile 108及更高版本中，不会触发touchcancel事件，取而代之的是pointercancel事件——这是因为Chrome逐步转向使用Pointer Events标准来统一处理触摸、鼠标、触控笔等各类输入，旧的Touch Events在部分场景下被替换。

手动取消按钮高亮的处理方案 #

要确保在触摸操作被取消时能正确重置按钮高亮状态，需要同时监听传统触摸事件和指针事件，覆盖新旧版本浏览器的情况：

• 保留对touchcancel的监听，兼容旧版Chrome Mobile
• 添加对pointercancel的监听，适配Chrome Mobile 108+的新行为
• 同时结合touchend、pointerup处理正常触摸结束的场景，避免状态残留

优化后的事件捕获脚本 #

在你提供的脚本基础上，补充指针事件的监听，即可捕获到超时取消时的事件：

<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<style>
html, body, pre {
  position:absolute; top:0; left:0; right:0; bottom:0;
  margin: 0; user-select: none;
}
pre {margin: 10px; overflow-y:auto}
</style>
</head>
<body>
<pre id="ELEM"></pre>

<script>
const ELEM = document.getElementById("ELEM")
ELEM.appendChild(document.createTextNode(""));

function Print(s) {
  let t = (new Date() / 1000 % 60).toFixed(2).padStart(5,0);
  ELEM.firstChild.nodeValue += `${t}: ${s}\n`;
  ELEM.scrollTop = ELEM.scrollHeight;
}

Print("Hello, world!");
// 补充指针事件，覆盖新旧场景
const EVENTS = [
  "mouseup", "mousedown", "touchstart", "touchend", "click", 
  "touchcancel", "mouseenter", "mouseout", "focusin",
  "pointerdown", "pointerup", "pointercancel"
];
for (let e of EVENTS) {
  document.body.addEventListener(e, () => {Print(e)});
}
</script>
</body>
</html>

额外说明 #

• 若你的按钮高亮是通过:active伪类实现，在部分场景下浏览器可能无法自动重置，此时可以在pointercancel、touchcancel、touchend、pointerup事件中，手动移除按钮的高亮类或重置相关样式
• 你提到的触摸移出元素问题已有成熟polyfill，无需在此场景下额外处理

内容的提问来源于stack exchange，提问作者personal_cloud