检测到浏览器没有鼠标且仅触摸 [英] Detecting that the browser has no mouse and is touch-only

问题描述

我正在开发一个非常不同的用于触摸的界面（当您点击时您的手指隐藏屏幕）和鼠标（主要依赖于悬停预览）的web应用程序（而不是一个包含有趣文本页面的网站）。
如何检测到我的用户没有鼠标可以为他提供正确的界面？我打算为鼠标和触摸的人留下一个开关（就像一些笔记本一样）。

浏览器中的触摸事件功能实际上并不意味着用户正在使用触摸设备（例如，Modernizr不会削减它）。如果设备有鼠标，正确回答问题的代码应该返回false，否则返回true。对于使用鼠标和触摸的设备，它应该返回false（不是仅触摸）

作为旁注，我的触摸界面可能也适用于仅键盘设备，所以更多的是缺少我想要检测的鼠标。

为了使需求更加清晰，这里是我要实现的API：

  //等级1 
 
 
 //目前的答案提供了一种方法。 
 hasTouch（）; 
 
 //如果需要鼠标，则返回true。 
 //注意：正如OP解释的那样，这不是！hasTouch（）
 //我认为我们已经没有答案了，为什么我提供赏金
 hasMouse（）; 
 
 // Level 2（我不认为这是可能的，但也许我错了，所以为什么不问）
 
 //回调被调用时的结果hasTouch（）更改。 
 listenHasTouchChanges（callback）; 
 
 //当hasMouse（）的结果发生变化时，调用callback。 
 listenHasMouseChanges（callback）; 
  

解决方案

主要的麻烦是你有以下不同的类设备/使用案例：

1. 鼠标和键盘（桌面）


2. 仅触摸（手机/平板电脑）


3. 鼠标，键盘和触摸（触摸笔记本电脑）


4. 触摸和键盘（平板电脑上的蓝牙键盘）
   
5. 仅限鼠标（禁用用户/浏览首选项）


6. 仅键盘（禁用用户/浏览首选项）


7. 触摸和鼠标（即悬停来自Galaxy Note 2笔的事件）

更糟糕的是，您可以从其中一些类转换到其他类（鼠标插入，连接到键盘），或者用户可以在正常的笔记本电脑上显示，直到他们伸出并触摸屏幕。

你是正确的假设存在浏览器中的事件构造函数不是向前推进的好方法（而且它有点不一致）。另外，除非你正在跟踪一个非常具体的事件，或者只是试图排除上面的几个类，否则使用事件本身并不是完全的证明。

例如，假设你已经发现用户发出了真正的鼠标移动（而不是触摸事件中的错误移动，请参阅 http：// www。 html5rocks.com/en/mobile/touchandmouse/ ）。

那又怎样？

你启用悬停样式？你添加更多按钮？

无论哪种方式，你都要增加玻璃时间，因为你必须等待事件发生。

但是当你的贵族用户决定拔掉他的鼠标并完全接触时会发生什么...你等他接触你现在挤满的界面，然后在他努力确定你现在拥挤之后立即改变它UI？

在bullet形式中，在引用stucox https://github.com/Modernizr/Modernizr/issues/869#issuecomment-15264101

• 我们想要检测是否存在鼠标


• 在事件发生之前可能无法检测到。


• 因此，我们所做的是什么重新检测是否在此会话中使用了鼠标 - 它不会立即从页面加载


• 我们可能也无法检测到没有鼠标 - d直到不确定真正的（我认为这比设置
  更有意义，直到证明为止它是假的）


• 我们可能无法检测鼠标在会话期间是否断开 - 这将是与放弃使用
  鼠标的用户无法区分

另外：浏览器知道用户何时插入鼠标/连接键盘，但不会将其暴露给JavaScript .. dang！

这会引导您进行以下操作：

跟踪给定用户的当前功能是复杂，不可靠和可疑的优点

尽管如此，渐进增强的想法在这里应用得非常好。无论用户的环境如何，都可以建立一个顺畅运行的体验。然后根据浏览器功能/媒体查询进行假设，以添加在假定的上下文中相对的功能。鼠标的存在只是不同设备上的不同用户体验您的网站的众多方式之一。在内核中创建具有优点的东西，不要太担心人们点击按钮的方式。

I'm developing a webapp (not a website with pages of interesting text) with a very different interface for touch (your finger hides the screen when you click) and mouse (relies heavily on hover preview). How can I detect that my user has no mouse to present him the right interface? I plan to leave a switch for people with both mouse and touch (like some notebooks).

The touch event capability in the browser doesn't actually mean the user is using a touch device (for example, Modernizr doesn't cut it). The code that correctly answers the question should return false if the device has a mouse, true otherwise. For devices with mouse and touch, it should return false (not touch only)

As a side note, my touch interface might also be suitable for keyboard-only devices, so it's more the lack of mouse I'm looking to detect.

To make the need more clear, here is the API that I'm looking to implement:

// Level 1


// The current answers provide a way to do that.
hasTouch();

// Returns true if a mouse is expected.
// Note: as explained by the OP, this is not !hasTouch()
// I don't think we have this in the answers already, that why I offer a bounty
hasMouse();

// Level 2 (I don't think it's possible, but maybe I'm wrong, so why not asking)

// callback is called when the result of "hasTouch()" changes.
listenHasTouchChanges(callback);

// callback is called when the result of "hasMouse()" changes.
listenHasMouseChanges(callback);

解决方案

The main trouble is that you have the following different classes of devices/use cases:

1. Mouse and keyboad (desktop)
2. Touch only (phone/tablet)
3. Mouse, keyboard, and touch (touch laptops)
4. Touch and keyboard (bluetooth keyboard on tablet)
5. Mouse only (Disabled user/browsing preference)
6. Keyboard only (Disabled user/browsing preference)
7. Touch and mouse (ie hover events from Galaxy Note 2 pen)

What's worse, is that one can transition from some of these classes to others (plugs in a mouse, connects to keyboard), or a user may APPEAR to be on a normal laptop until they reach out and touch the screen.

You are correct in assuming that the presence of event constructors in the browser is not a good way to move forward (and it is somewhat inconsistent). Additionally, unless you are tracking a very specific event or only trying to rule out a few classes above, using events themselves isn't full proof.

For example, say you've discovered that a user have emitted a real mousemove (not the false one from touch events, see http://www.html5rocks.com/en/mobile/touchandmouse/).

Then what?

You enable hover styles? You add more buttons?

Either way you are increasing time to glass because you have to wait for an event to fire.

But then what happens when your noble user decides wants to unplug his mouse and go full touch.. do you wait for him to touch your now crammed interface, then change it right after he's made the effort to pinpoint your now crowded UI?

In bullet form, quoting stucox at https://github.com/Modernizr/Modernizr/issues/869#issuecomment-15264101

• We want to detect the presence of a mouse
• Ae probably can't detect before an event is fired
• As such, what we're detecting is if a mouse has been used in this session — it won't be immediately from page load
• We probably also can't detect that there isn't a mouse — it'd be undefined until true (I think this makes more sense than setting it false until proven)
• And we probably can't detect if a mouse is disconnected mid-session — that'll be indistinguishable from the user just giving up with their mouse

An aside: the browser DOES know when a user plugs in a mouse/connects to a keyboard, but doesn't expose it to JavaScript.. dang!

This should lead you to the following:

Tracking the current capabilities of a given user is complex, unreliable, and of dubious merit

The idea of progressive enhancement applies quite well here, though. Build an experience that works smoothly no matter the context of the user. Then make assumptions based on browser features/media queries to add functionality that will be relative in the assumed context. Presence of a mouse is just one of the multitudes of ways in which different users on different devices experience your website. Create something with merit at its kernel and don't worry too much about how people click the buttons.

这篇关于检测到浏览器没有鼠标且仅触摸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！