在触摸设备上触发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);

我真的需要检查设备是否支持触摸来区分鼠标点击和触摸点击吗？

- revy

Answer 1

不需要且可能不应该尝试测试设备是否为触摸屏。如果您希望停止其他事件触发，则可以使用preventDefault方法。

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

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

- Devin Fields