在触摸设备上触发 mousedown 和 mouseup

Question

只是好奇 mousedown 和 mouseup 事件的目的，因为它们也在触摸设备上触发。 我认为 mousedown 和 touchstart 是互斥的（前者在桌面上工作，后者在触摸设备上工作），并且 mouseup 和 touchend 相同，但情况似乎并非如此。一次完整的触摸事件会触发上述所有事件：在 safari 和 chrome 上测试。因此，为了区分单击（鼠标）事件和单击（触摸）事件，我需要使用某种函数来告诉我这是否是触摸设备：

    function isTouchDevice() {
        return 'ontouchstart' in window        // works on most browsers
            || navigator.maxTouchPoints;       // works on IE10/11 and Surface
    }

    myElem.addEventListener("mousedown", () => {
        if (isTouchDevice()) return;
        // do something
    }, false);

    myElem.addEventListener("mouseup", () => {
        if (isTouchDevice()) return;
        // do something
    }, false);

    myElem.addEventListener("touchstart", () => {
        // do something
    }, false);

    myElem.addEventListener("touchend", () => {
        // do something
    }, false);

我真的需要检查设备是否是触摸式的，以区分鼠标点击和触摸点击吗？

Answer 1

不，您不会也不应该尝试测试设备是否是触摸屏。如果您希望阻止其他事件触发，可以使用 PreventDefault 方法。

myElem.addEventListener("touchstart", (event) => {
   event.preventDefault(); 
   // do something
}, false);

如果您想了解更深入的信息，您应该阅读这篇文章：触摸和鼠标

Answer 2

处理这个问题的正确方法是

PointerEvent

和

pointerType

：

targetElement.addEventListener(
  "pointerdown",
  (event) => {
    // Call the appropriate pointer type handler
    switch (event.pointerType) {
      case "mouse":
        process_pointer_mouse(event);
        break;
      case "pen":
        process_pointer_pen(event);
        break;
      case "touch":
        process_pointer_touch(event);
        break;
      default:
        console.log(`pointerType ${event.pointerType} is not supported`);
    }
  },
  false,
);