iOS 上的 TouchMove 事件

TouchMove Event on iOS

本文关键字：事件 TouchMove 上的 iOS      更新时间：2023-09-26

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

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

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

谢谢

正如你在这里读到的，只有 Chrome 和 Firefox 支持changedTouches 在TouchEvent ，这反过来意味着 Safari 不支持这一点。

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

您应该尝试根据它们在touchstart上的索引来跟踪触摸（为什么他们不称其为touchdown......），并找出touchmove这些触摸中的任何一个是否发生了变化。你正在使用画布，所以我可以想象你正在尝试画一些东西。一旦您数到超过 1 次触摸，您就可以停止绘图。这样，您始终可以确保跟踪右手指（或脚趾）。我不是在评判）

如果您想在

带有 13 个事件侦听器的 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
};
相关文章：