如何使用TouchEvent检测移动设备，同时使用javascript区分触摸屏PC

Question

我知道有很多类似的问题。

目前，我使用以下代码来检测触摸屏设备，并将它们标记为移动设备。

    function isMobile() {
    try {
        document.createEvent("TouchEvent");
        console.log("mobile");
        return true;
    }
    catch (e) {
        console.log("pc");
        return false;
    }
}

它在移动设备上运行良好，但对于同时配有键盘和鼠标的触摸屏电脑又如何呢？我如何区分它们？

由于我没有触摸屏电脑，我无法测试和解决这个问题。

我想确定它是移动设备（例如手机或平板电脑）基本上没有鼠标和键盘的设备，还是有键盘和鼠标的 PC。

Answer 1

我想确定它是移动设备，例如手机或平板电脑基本上没有鼠标和键盘的设备还是有键盘和鼠标的PC。

您可以使用此答案提供的方法检查设备是否有鼠标指针：

const hasCursor = window.matchMedia('(pointer:fine)').matches

据我所知，这只对于没有指针的设备来说应该是错误的，因此同时具有触摸屏和触摸板的笔记本电脑将不匹配这一点，这应该是您所需要的。

检测键盘是否存在比较困难，部分原因是大多数手机/平板电脑都支持可以使用的外部键盘。您可能不需要此方法，因为第一种方法应该涵盖所有情况，但您可以使用解决方法通过侦听第一个

keyup

 事件来检测键盘是否存在：

let hasKeyboard = false
document.addEventListener("keyup", () => {
  hasKeyboard = true
}, { once: true })

然而，这非常棘手，就好像键盘用户从不使用键盘一样，他们会显示为没有键盘。仅在需要时使用此方法，否则仅使用第一种方法。

Answer 2

这是一个非常好的问题，我最近在 2024 年一直在努力解决这个问题。

我发现一个很好的检查方法是简单地检查“touches”属性是否“在”“click”事件中。

根据 MDN 文档 (

https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event)

An element receives a click event when any of the following occurs:

 - a pointing-device button (such as a mouses primary button) 
is both pressed and released while the pointer is located inside the element.
 - a touch gesture is performed on the element

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches

element.addEventListener("click", (event) => {
  if ("touches" in event) {
    // touch event handler
    console.log("touch event");
  } else {
    // mouse handlers
    console.log("mouse event");
  }
}

这样就完全依赖事件了。它使设备类型变得无关紧要。如果设备是带有蓝牙鼠标的 iPad，它将根据事件属性处理触摸或鼠标单击。

如果您仍然需要检测键盘，可能最好的方法是 Jacob 提到的方法。有一个

navigator.keyboard

 方法（

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/keyboard），但截至目前（01.30.2024）只有 Edge 和 Chrome 支持它，因此不适用于 iOS/Mac 设备。