如何检测设备是否支持鼠标？

Question

我目前使用以下测试（取自 Modernizr）来检测触摸支持：

function is_touch_device() {
    var bool;
    if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
        bool = true;
    } else {
        injectElementWithStyles(['@media (',prefixes.join('touch-enabled),('),mod,')','{#modernizr{top:9px;position:absolute}}'].join(''), function(node) {
            bool = node.offsetTop === 9;
        });
    }
    return bool;
}

但有些设备是触摸和鼠标驱动的，所以我想要一个单独的函数来检测设备是否支持鼠标。进行此检查的好方法是什么？

最终我的意图是能够做到这些：

if(is_touch_device())

if(has_mouse_support())

if(is_touch_device() && has_mouse_support())

Answer 1

a CSS media 就是为了这个！

您可以通过获取pointer CSS媒体功能的值来检查某些设备是否有鼠标：

if (matchMedia('(pointer:fine)').matches) {
  // Device has a mouse
}

因为它是 CSS 你甚至不需要使用 JavaScript：

@media (pointer: fine) {
  /* Rules for devices with mouse here */
}

Answer 2

我目前正在使用以下（jQuery），我还没有在特定设备上发现任何缺陷

$(window).bind('mousemove.hasMouse',function(){
    $(window).unbind('.hasMouse');
    agent.hasMouse=true;
}).bind('touchstart.hasMouse',function(){
    $(window).unbind('.hasMouse');
    agent.hasMouse=false;
});

解释：鼠标设备（也包括触摸屏笔记本电脑）在触发 touchstart 之前首先触发 mousemove，并且 hasMouse 设置为 TRUE。触摸设备（例如触发 mousemove 的 iOS）在单击时首先触发 touchstart，然后触发 mousemove。这就是为什么 hasMouse 会被设置为 FALSE。

唯一的问题是这取决于用户交互，该值仅在鼠标移动或触摸启动后才正确，因此不能信任在页面加载时使用。

Answer 3

正如问题cmets中提到的，特别是https://github.com/Modernizr/Modernizr/issues/869，目前还没有好的答案。

Answer 4

@josemmo 的回答对我不起作用：在带有鼠标的 Android 手机上 matchMedia('(pointer:fine)').matches 不匹配。

幸运的是，我成功完成了另一个媒体查询：hover。

if (matchMedia('(hover:hover)').matches) {
  // Device has a mouse
}

Answer 5

var clickHandler = (isMouseEventSupported('click') ? 'click' : 'touchstart');

function isMouseEventSupported(eventName) {
    var element = document.createElement('div');
    eventName = 'on' + eventName;
    var isSupported = (eventName in element);
    if (!isSupported) {
       element.setAttribute(eventName, 'return;');
       isSupported = typeof element[eventName] == 'function';
    }
    element = null;
    return isSupported;
}

这是我的朋友/同事的代码，他基于：http://perfectionkills.com/detecting-event-support-without-browser-sniffing/

Answer 6

没有立即知道的方法，您必须等待触摸事件或鼠标事件。

假设您想要检测任一鼠标或触摸，您可以执行以下操作：监听touchstart和mousemove（后者可以在触摸设备上触发而无需一个真正的鼠标）。无论哪个先触发，99% 的结果都是您要找的。​​p>

这不考虑实际上同时具有两者的设备。

document.addEventListener('mousemove', onMouseMove, true)
document.addEventListener('touchstart', onTouchStart, true)
function onTouchStart(){
  removeListeners()
  // touch detected: do stuff
}
function onMouseMove(){
  removeListeners()
  // mouse detected: do stuff
}
function removeListeners(){
  document.removeEventListener('mousemove', onMouseMove, true)
  document.removeEventListener('touchstart', onTouchStart, true)
}

Answer 7

截至 2021 年，指针事件已在所有主要浏览器中实现。

它使您可以动态检测指针设备鼠标、触摸和笔。

var is_touch_device=(('ontouchstart' in window)||
                    (navigator.maxTouchPoints > 0)||
                    (navigator.msMaxTouchPoints > 0));

var has_mouse_support=false;
document.addEventListener("pointermove", function(evt) {
  var pointerType=evt.pointerType;
  /*** Safari quirk  ***/
  if(pointerType==="touch"&&evt.height===117.97119140625
                         &&evt.height===evt.width)pointerType="mouse";
  /*** Safari quirk  ***/
  has_mouse_support=(pointerType==="mouse");
}

这当然取决于用户移动鼠标指针。

如果激活了 AssistiveTouch，即使 ipadOS 14.4.2 上的 safari 也会检测到它！但是那里的指针类型检测似乎有些怪癖。它在第一次使用鼠标并且没有执行触摸时将指针类型检测为鼠标。但是如果你以后使用触摸，它不会检测并更改为鼠标的指针类型，如果在触摸后使用鼠标！毫不奇怪！

编辑：在玩弄了 ipadOS safari 之后，我发现，当鼠标在触摸后使用时，pointerevent 的宽度和高度完全相同，在 ipadOS 14.4.2 中是 117.97119140625 每个使用鼠标的时间。这可以用作不可靠的解决方法。谁知道他们什么时候会改变宽度/高度？ ipadOS 中指针移动检测的另一个特点是，鼠标移动仅在按下鼠标按钮时才会检测到。

未在 ipad/iphone 上使用笔进行测试。谁知道这会显示出哪些怪癖？