在触摸设备上触发 mousedown 和 mouseup

Posted 2023-05-09

【中文标题】在触摸设备上触发 mousedown 和 mouseup

【英文标题】：mousedown and mouseup triggered on touch devices

【发布时间】：2018-03-26 13:21:17

【问题描述】：

只是好奇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);

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

【参考方案1】：

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

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

如果你想要更深入的信息，你应该阅读这篇文章：Touch and Mouse