移动端长按元素后touchstop事件未触发的问题解决求助

1. 修正错误的触摸事件名 #

你代码里写的touchstop是错误的，标准的触摸结束事件为**touchend**，这个拼写错误会直接导致触摸释放时事件无法触发，是核心问题之一。

2. 阻止触摸默认行为 #

在touchstart事件中调用event.preventDefault()，可以阻止浏览器的默认触摸行为（比如长按选中文本、弹出上下文菜单），确保触摸事件的完整生命周期正常触发。

3. 监听touchcancel事件 #

当触摸操作被意外中断（比如页面滚动、弹出系统提示）时，浏览器会触发touchcancel事件，此时也需要调用simulateKeyUp('a')，避免角色持续移动。

4. 增强CSS的触摸行为禁用 #

除了user-select: none，添加以下CSS属性进一步禁用移动端的长按相关默认行为，提升兼容性：

#goLeft {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* 禁用长按上下文菜单 */
  -webkit-touch-callout: none;
  /* 禁用双击缩放，优化触摸响应 */
  touch-action: manipulation;
}

最终修正后的JS代码 #

const goLeftEl = document.querySelector('#goLeft');

// 统一处理按键按下逻辑
function handleMoveStart() {
  simulateKeyDown('a');
}

// 统一处理按键抬起逻辑
function handleMoveEnd() {
  simulateKeyUp('a');
}

// 绑定触摸与鼠标事件
goLeftEl.addEventListener('touchstart', (e) => {
  e.preventDefault();
  handleMoveStart();
});
goLeftEl.addEventListener('mousedown', handleMoveStart);

goLeftEl.addEventListener('touchend', handleMoveEnd);
goLeftEl.addEventListener('mouseup', handleMoveEnd);
goLeftEl.addEventListener('touchcancel', handleMoveEnd);

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