Javascript 檢測用戶是否有鼠標

Question

這不是為了設計，我正在制作一個教程，我會要求用戶點擊或單擊事物。

現在我正在使用：

("ontouchstart" in document.documentElement);

但這在帶有觸摸屏的筆記本電腦上失敗了。

Answer 1

您可以為此使用CSS 媒體查詢。 要檢測鼠標，您的查詢將如下所示：

@media (hover: hover) and (pointer: fine) {
    // 'hover' means a device that supports hovering
    // 'pointer: fine' means an accurate pointing device, as opposed to limited pointing device like touchscreen (where you would use 'coarse' value
}

請注意，此查詢也會檢測觸摸板，但不會檢測智能手機、觸摸屏、基於觸控筆的屏幕或其他控制器，如 Nintendo Wii、Microsoft Kinect。

要從 JavaScript 運行相同的查詢，您可以使用Window.matchMedia() ：

if (matchMedia('(hover: hover) and (pointer: fine)').matches) {
  // You code
}