为什么使用 TouchMove-event 时 left 和 top 属性被禁用

Question

使用 onmousemove 时，左侧和顶部属性已启用，我可以拖动 div 元素，但在使用 ontouchmove 时尝试使用相同的属性时，它们被禁用：

这是为什么？

Answer 1

您面临的问题是由于浏览器中处理触摸事件和鼠标事件的方式不同造成的。使用 onmousemove 时，会启用 left 和 top 属性，因为浏览器知道您正在处理鼠标事件。另一方面，当使用 ontouchmove 时，浏览器不知道如何处理 left 和 top 属性，因为它期待触摸事件。

要解决这个问题，您可以使用触摸事件代替鼠标事件。触摸事件有 touchstart、touchmove 和 touchend。这些事件提供与鼠标事件相同的功能，但它们是专门为触摸设备设计的。

以下示例说明了如何使用触摸事件来实现与鼠标事件相同的功能：

var isTouching = false;
var startX, startY;

function handleTouchStart(e) {
  isTouching = true;
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
}

function handleTouchMove(e) {
  if (!isTouching) return;

  var dx = e.touches[0].clientX - startX;
  var dy = e.touches[0].clientY - startY;

  var myHeader = $("header");

  if (Math.abs(dy) > Math.abs(dx)) {
    if (dy > 700) {
      $(myHeader).slideUp(400);
    } else {
      $(myHeader).slideDown(800);
    }
  }
}

function handleTouchEnd() {
  isTouching = false;
}

document.addEventListener("touchstart", handleTouchStart, false);
document.addEventListener("touchmove", handleTouchMove, false);
document.addEventListener("touchend", handleTouchEnd, false);

在此代码中，我们使用 touchstart、touchmove 和 touchend 事件来处理 div 元素的拖动。我们还使用 Math.abs() 函数来计算水平和垂直运动的绝对值。这确保了当用户垂直滚动时标题只会向上或向下滑动。