2

背景

我正在努力实现一些目标，但这真的让我发疯。所以任何帮助将不胜感激！

我在 Matter.js 中创建了一个场景，该场景将放置在页面下方的容器中。我希望访问者能够与场景进行交互，拖放尸体。但是允许交互会产生问题，即只要鼠标悬停在画布上，Matter.js 就会阻止用户滚动。

所以为了解决这个问题，我使用以下代码：

mouseConstraint.mouse.element.removeEventListener("mousewheel", mouseConstraint.mouse.mousewheel);
mouseConstraint.mouse.element.removeEventListener("DOMMouseScroll", mouseConstraint.mouse.mousewheel);

这使得用户可以滚动浏览页面，并且仍然能够通过单击和拖动主体与场景进行交互，因为只有滚动事件侦听器被删除。至少在桌面上。

问题

但是，在移动设备上，触摸事件是使用户可以在页面上滚动的事件，因此我还需要从 Matter.js 中的鼠标约束中删除touchmove,touchstart和事件侦听器。touchend像这样：

mouseConstraint.mouse.element.removeEventListener('touchmove', mouseConstraint.mouse.mousemove);
mouseConstraint.mouse.element.removeEventListener('touchstart', mouseConstraint.mouse.mousedown);
mouseConstraint.mouse.element.removeEventListener('touchend', mouseConstraint.mouse.mouseup);

这就是问题发生的地方。如果我删除触摸事件，用户可以滚动画布，但用户不能与场景交互，因为这需要激活触摸事件。

所以我想知道是否有任何方法可以添加触摸事件但只允许它们在场景中的某些物体上工作？我发现我可以将mouseConstraint.body其用作布尔值，以了解是否单击/触摸了身体。可以以此为基础以某种方式使用它吗？：

Matter.Events.on(mouseConstraint, "mousedown", function(event) {
   if (mouseConstraint.body) {
      console.log("Body clicked!");
   }        
});
4

1 回答 1

0

这是我想出的解决方案。它并不完美，但总比没有好。

 let touchStart;
  mouseConstraint.mouse.element.addEventListener('touchstart', (event) => {
    if (!mouseConstraint.body) {
      touchStart = event;
    }
  });

  mouseConstraint.mouse.element.addEventListener('touchend', (event) => {
    if (!mouseConstraint.body) {
      const startY = touchStart.changedTouches[0].clientY;
      const endY = event.changedTouches[0].clientY;
      const delta = Math.abs(startY - endY);

      if (delta > 80) {
        window.scrollTo(0, 600);
      }
    }
  });

您侦听触摸开始事件并将其存储在变量中。然后在 touchend 事件中检查滑动是否足够大以构成滚动，然后滚动到内容。

于 2021-03-25T13:42:11.263 回答