Question

我目前正在为iPad开发一个Web应用程序。我有一个html画布，我想跟踪touchmove事件的坐标。我可以跟踪touchstart事件，它输出我按下的坐标，但是当我在画布上移动时我尝试输出当前坐标时，它什么也没做，我有以下代码，它使用的是angular2，在这里。 currentArrowPoint是我在屏幕上输出值的标签：

e.preventDefault();
this.currentArrowPoint = ["a", "b"];
this.currentYPosition = ["e.changedTouches[0].pageY];
this.currentArrowPoint = [this.currentYPosition];

它肯定会进入鼠标移动，因为我得到了a和b，但是当我输出与事件e相关的任何内容时，我绝对没有输出，即使我尝试输出e也没有。除了苹果设备之外，这适用于所有设备，所以想知道我是否遗漏了苹果浏览器或设备的特殊内容？

由于

Answer 1

正如您可以阅读here，只有changedTouches中的Chrome和Firefox支持TouchEvent，这反过来意味着Safari不支持此功能。

我猜你也不是故意把e.changedTouches[0].pageY放在引号之间？

您应该根据touchstart上的索引尝试跟踪触摸（这样的浪费，为什么他们没有调用此touchdown ....）并找出touchmove如果任何这些接触都发生了变化。你正在使用画布，所以我可以想象你正在尝试绘制一些东西。一旦计算超过1次触摸，您就可以停止绘图。通过这种方式，你总能确定你正在跟踪正确的手指（或脚趾......我不会评判）

Answer 2

如果您想滑动或使用3事件监听器在iOS 13上执行类似操作，我会找到解决方案。

const someFucntion = () =>{
   let touchstartX = 0;
   let touchendX = 0;

   const gesturedZone = this.mainWrapperRef.current; // ref, querySelector or something else
      gesturedZone.addEventListener('touchstart', (event) => {
         if (event.touches.length === 1) {
            touchstartX = event.touches[0].screenX;
         }
      }, false);
      gesturedZone.addEventListener('touchmove', (event) => {
         if (event.touches.length === 1) {
            touchendX = event.touches[0].screenX;
         }
      }, false);
      gesturedZone.addEventListener('touchend', () => {
         this.handleGesture(touchstartX, touchendX);
      }, false);
}
const handleGesture = (touchstartX, touchendX) => {
   // do some staff
};

iOS上的TouchMove事件

2 个答案: