如何避免innerHTML更新导致元素拖拽操作中断？

嘿，这问题我太熟了！你遇到的核心问题就是定时器频繁用innerHTML更新计时器元素——每次innerHTML赋值都会完全替换元素内部的DOM结构，触发元素重绘，直接打断了拖拽过程中浏览器对元素的状态追踪，所以拖拽会莫名其妙断掉。你说调整大小后好像好用，大概率是巧合，刚好那次拖拽没赶上innerHTML的更新时机，不是真的解决办法哈。

给你几个靠谱的修复方案，按优先级排序：

• 首选：用textContent替代innerHTML更新文本
  innerHTML是个“大动作”，会销毁重建元素内部的所有节点，而textContent只会修改元素的文本内容，完全不会干扰元素上绑定的事件和拖拽状态。把定时器里的更新代码改成这样就行：

  document.getElementById('Timer').textContent = `${MinutesElapsed}:${SecondsElapsed}`;
  

  这应该能立刻解决拖拽中断的问题，改动最小效果最好。

• 备选：分离拖拽容器和计时器文本
  如果出于某些原因你必须用innerHTML，可以把计时器的文本放在一个子元素里，拖拽操作绑定在父容器上。比如调整HTML结构：

  <div id='Timer' draggable=true style='position:absolute; z-index:1; top:32px; width:125px; height:55px; text-align:center;
  font-family:segoe ui variable display; color:#5D729F; cursor:grab' onDragStart="GrabElement(this,event,'EarTrainer.php');"
  onDragEnd='ReleaseElement();' onMouseEnter='SwitchHooveredElementTo(this);' onMouseLeave='FalsifyHooveredElement();'>
    <span id='TimerDisplay'></span>
  </div>
  

  然后定时器里更新子元素的内容：

  document.getElementById('TimerDisplay').textContent = `${MinutesElapsed}:${SecondsElapsed}`;
  

  这样父容器的拖拽状态完全不会被子元素的文本更新影响。

• 凑合用：降低定时器更新频率
  你现在的定时器是每100ms更新一次，但你的计时器显示的是分钟和秒，其实每秒更新一次就够了！把setInterval的间隔改成1000，能大幅减少DOM更新的次数，降低拖拽被打断的概率。不过这只是缓解，不是根治，还是前两种方法更稳妥。

备注：内容来源于stack exchange，提问作者Frank