使用JavaScript动态创建HTML导致touchend事件失效的问题

核心原因 #

触摸事件序列（touchstart → touchmove → touchend）执行过程中，同步修改DOM结构会触发浏览器重排/重绘操作，干扰浏览器对触摸目标的追踪，导致touchend事件无法正常派发。这种场景下touchcancel不会触发，因为没有明确的事件取消触发条件（比如触摸元素被移除、触摸超出窗口边界等）。

具体解决方法 #

1. 异步执行DOM创建操作
   把动态创建HTML元素的逻辑放到requestAnimationFrame或setTimeout中，让触摸事件序列完整执行后再处理DOM变化，避免打断事件追踪链。

   代码示例修改：

   // 原同步创建逻辑（存在问题）
   function handleTouchMove(e) {
     // 行走控制逻辑
     const newText = document.createElement('div');
     newText.textContent = '动态文本';
     document.body.appendChild(newText);
   }
   
   // 修改为异步执行（修复问题）
   function handleTouchMove(e) {
     // 行走控制逻辑
     requestAnimationFrame(() => {
       const newText = document.createElement('div');
       newText.textContent = '动态文本';
       document.body.appendChild(newText);
     });
   }
   

2. 隔离动态元素的触摸事件
   如果新创建的元素覆盖了触摸区域，可能会让浏览器误判触摸目标。给动态元素添加pointer-events: none样式，禁止它接收触摸事件：

   .dynamic-element {
     pointer-events: none;
   }
   

3. 调试事件时序
   在各触摸事件中打印时间戳，同时记录DOM创建时机，验证是否是DOM操作打断了事件序列：

   function handleTouchStart(e) {
     console.log('touchstart触发', Date.now());
   }
   
   function handleTouchMove(e) {
     console.log('touchmove触发', Date.now());
     // DOM创建逻辑
   }
   
   function handleTouchEnd(e) {
     console.log('touchend触发', Date.now());
   }
   

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