Question

我制作了一个旋转木马，并且我的dragevent在计算机上工作正常，但在移动设备上却无法运行。

我见过有人建议使用touchEvent，但是touchEvent都不起作用。

const $img = document.querySelector('img');

$img.addEventListener('dragstart', function(e){ console.log(`Start: ${e.screenX}`) },false);

$img.addEventListener('dragend', function(e){ console.log(`End: ${e.screenX}`) },false)

如果我使用touchstart或touchend进行相同的请求，则该事件没有任何价值

/* event does not fire */
$img.addEventListener('touchstart', function(e){ console.log(`Evento: ${e.screenX}`) }, false)

Answer 1

在移动设备上，您可以使用：

<html>
  <body>
    <p id="test">Drag Me!</p>
    <script>
      const p = document.getElementById("test");
      p.addEventListener("dragstart", handleStuff, false);
      p.addEventListener("touchstart", touch2drag, false);
      function handleStuff(e) {
        e.stopPropagation();
        e.preventDefault();
        if (e.clientX) {
          console.log(`Stuff happened at ${e.clientX}x;${e.clientY}.`);
        }
      }
      function touch2drag(e) {
        e.stopPropagation();
        e.preventDefault();
        // translate to mouse event
        let clkEvt = document.createEvent("MouseEvent");
        clkEvt.initMouseEvent(e.type.replace("touch", "drag"), true, true, window, e.detail,
                    e.touches[0].screenX, e.touches[0].screenY,
                    e.touches[0].clientX, e.touches[0].clientY,
                    false, false, false, false,
                    0, null);
        p.dispatchEvent(clkEvt);

        // or just handle touch event
        handleStuff(e);
      }

    </script>
  </body>
</html>

什么是DragEvent的移动等价方式？

1 个答案: