在触摸屏设备上检测鼠标 [英] Detect mouse on touch screen device

问题描述

我使用以下代码来检测设备是否为触摸设备:

I use the following code to detect whether the device is a touch device or not:

var isTouchDevice = 'ontouchstart' in window || navigator.msMaxTouchPoints;

if(isTouchDevice)
{
    $('body').addClass('yes-touch');
}
else
{
    $('body').addClass('no-touch');
}

当它不是触摸设备时，我使用它只显示 :hover 状态(因为大多数触摸设备将点击解释为悬停).

I use this to only show :hover states when it is NOT a touch device (as most touch devices interpret a tap as a hover).

.no-touch .element:hover {
    color: red;
}

问题是，我们办公室的其中一台 PC 是一体式触摸屏 PC，这意味着在使用鼠标时不会出现悬停状态.

The problem is, one of our PCs in the office is an all-on-one touch screen PC, which means that when using a mouse the hover states don't occur.

有没有办法确定触摸屏设备上是否正在使用鼠标?换句话说，它应该在使用鼠标时应用 no-touch 类，在使用触摸屏时应用 yes-touch 类.>

Is there a way to work out whether a mouse is being used on a touch screen device? In other words, it should have the no-touch class applied when the mouse is being used and the yes-touch class applied when the touch screen is being used.

推荐答案

截至今天，还没有万无一失的铁定方法.现代人，几乎是特征检测方面的专家，最近有这样的说法:

As of today, there is no foolproof ironclad way of doing it. The modernizr folks, pretty much the experts in feature detection, recently had this to say about it:

https://github.com/Modernizr/Modernizr/issues/869#issuecomment-57891034

所有这一切的最终结果是您无法检测到鼠标在一种符合 Modernizr 可靠性水平的方式归功于.就我们的意图和目的而言，这是无法检测到的.

The end result of all of this is that you cannot detect a mouse use in a way that would conform to the level of reliability that Modernizr is credited with. For our intents and purposes, it is a undetectable.

如果您，未来的旅行者，希望尝试检测鼠标用户，那么以下是我能提供的最佳指南.

If you, future traveler, wish to attempt to detect a mouse user, then the following is the best guide I can offer.

1. 不要.严重地.仅仅因为用户有一个鼠标"并不意味着他们没有多种其他形式的输入.你真的应该试试很难避免做出任何基于改变的 UI/UX 决定基于鼠标用户与用户截然相反的想法触摸屏用户(或任何其他类型，就此而言).做东西通用.
2. 如果您必须并且只关心 IE 10 和 11，那么 IE 的PointerEvent 值得一试.支持很糟糕，在外面这两个(大概是未来的 IE 版本).
3. 您可以附上一个身体上悬停"事件的侦听器，如果为真，则用户可能有鼠标.这种方法的缺点包括触摸事件会在点击/触摸时短暂触发悬停事件，因此您可以得到误报.
4. 嗅探移动用户代理.这是一个坏主意，并且违背了 Modernizr 的核心.请不要这样做.

所以对我来说，#1 几乎可以概括它.但是，这回答了您的问题，但没有为您提供解决方案.您提到了办公室中我们 台 PC 中的一台……"这只是内部应用程序吗?我偶尔会遇到内部特殊用途或一次性页面可能出于某种原因需要一些单独处理的情况(例如我们的一名员工有一个带有鼠标的基于触摸的 AIO).然后我要做的是在 url 的末尾附加一个 ?hasmouse 并将该链接提供给用户.然后在您的 var isTouchDevice 之后但在您的 if 之前的 javascript 中，插入此代码以撤消它:

So to me #1 pretty much sums it up. However, that answers your question but doesn't give you a solution. You mention "one of our PC's in the office..." Is this by chance an internal only application? I've occasionally run across situations where internal special use or one off pages may require some individual treatment for whatever reason (like one of our employees having a touch based AIO with a mouse attached). What I'll do then is append a ?hasmouse onto the end of the url and give the user that link to bookmark. Then inside javascript after your var isTouchDevice but before your if, insert this code to undo it:

if (location.search == '?hasmouse') {
    isTouchDevice = false;
}

同样，这是一种仅供内部使用的简洁方式.

Again, thats sort of a no frills way for just internal use.

这篇关于在触摸屏设备上检测鼠标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！