通过 dispatchEvent

如何解决通过 dispatchEvent

我目前正在开发一个系统，该系统应该在带有触摸屏的桌面系统上打开的网络浏览器中运行。该系统应该检测放置在屏幕上的物体（有形物体）和其他触摸。该窗口在背景中包含一个画布，在该画布上检测到有形物体以及覆盖的 iframe 和其他按钮（它们仅占据窗口的一部分，仍然有足够的空间来放置和检测有形物体）。根据有形的 iframe 的地址 url 包含不同的参数。

我目前面临的问题是，当有形物体放置在画布上时，我在导航 iframe 时遇到问题。 当没有放置有形物体时，我可以很好地导航 iframe（在 touchend 之后没有刷新测试）。我猜，它有问题，因为它仍然有触摸由于有形，因此将其检测为多点触控。对于按钮，我可以通过侦听事件 touchstart 而不是单击来解决它。但是对于 iframe 这不是一个选项，因为我无法更改嵌入文档的代码。

所以我的想法是，当在 iframe（或者 iframe 的 div 父级）上检测到 touchstart 时，它应该将画布的当前活动触摸保存在一个数组中，然后删除这些触摸。然而，touches 和 TouchList 是只读的，因此我寻找了一个解决方案。 Here I found a possible solution. 我尝试为画布上与它匹配的每个触摸创建一个触摸，并在触摸上调度事件 touchEnd 以结束并因此将其删除，但是之后它仍然在窗口中得到了触摸。

var subSystem = document.getElementById("hideBody");
subSystem.addEventListener("touchstart",(event) => {
  console.log("Touch in Subsystem");
  console.log(window.event.touches);
  for (var i = 0; i < newTouchPoints.length; i++) {
    if (Touch.length < 1 || TouchEvent.length < 1)
      throw "TouchEvent constructors not supported";

    var touch = new Touch({
      identifier: newTouchPoints[i].identifier,target: canvas,clientX: newTouchPoints[i].clientX,clientY: newTouchPoints[i].clientY,screenX: newTouchPoints[i].clientX,screenY: newTouchPoints[i].clientY,pageX: newTouchPoints[i].clientX,pageY: newTouchPoints[i].clientY,radiusX: newTouchPoints[i].radiusX,radiusY: newTouchPoints[i].radiusY,rotationAngle: 0,force: 0.5
    })
    var touchEvent = new TouchEvent("touchend",{
      cancelable: true,bubbles: true,composed: true,touches: [touch],targettouches: [touch],changedtouches: [touch]
    })
    console.log(touch);
    document.body.dispatchEvent(touchEvent);
  }
  console.log(window.event.touches);
});

touches 只使用 clientX 和 clientY。 screen 和 page 始终与客户端具有相同的值（clientX = screenX = pageX）。 Here is the console log. 如图所示，创建的 Touch 和 window.event.touches 上的 touch 应该是一样的。有人知道错误可能在哪里以及如何解决吗？