使用TouchMove事件时left和top属性为何被禁用？

• 浏览器触摸默认行为抢占：触发ontouchmove时，浏览器会默认执行页面滚动、缩放等触摸行为，这些内置行为会干扰元素的left/top定位操作，甚至直接阻断自定义拖动逻辑的生效。此时需要在ontouchmove事件中调用event.preventDefault()，禁用浏览器默认触摸行为，确保自定义拖动逻辑优先执行。

• 触摸事件坐标获取错误：mousemove事件可直接通过event.clientX/event.clientY获取坐标，但touchmove事件的坐标需从event.touches[0].clientX/event.touches[0].clientY获取（支持多触点场景）。如果代码仍沿用鼠标事件的坐标获取方式，会拿到无效值，导致left/top赋值错误，看起来像属性被禁用。

• 触摸事件流拦截限制：部分浏览器对触摸交互有额外规则，比如要求元素有明确的触摸交互标识，或存在事件委托冲突，都会导致left/top的修改无法正确应用到元素上。

const dragDiv = document.getElementById('drag-div');
let startX, startY, initialLeft, initialTop;

// 触摸开始时记录初始位置
dragDiv.ontouchstart = function(e) {
  e.preventDefault(); // 阻止默认滚动行为
  const touch = e.touches[0];
  startX = touch.clientX;
  startY = touch.clientY;
  initialLeft = parseInt(window.getComputedStyle(dragDiv).left);
  initialTop = parseInt(window.getComputedStyle(dragDiv).top);
};

// 触摸移动时更新元素位置
dragDiv.ontouchmove = function(e) {
  e.preventDefault();
  const touch = e.touches[0];
  const deltaX = touch.clientX - startX;
  const deltaY = touch.clientY - startY;
  dragDiv.style.left = `${initialLeft + deltaX}px`;
  dragDiv.style.top = `${initialTop + deltaY}px`;
};

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