检测到浏览器没有鼠标,且只允许触摸。

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (15)

我正在开发一个Webapp,它有一个非常不同的界面,用于触摸(单击时手指隐藏屏幕)和鼠标(严重依赖悬停预览)。如何检测用户没有鼠标显示正确的界面?我打算给那些同时使用鼠标和触摸的人留下一个开关(比如一些笔记本)。

浏览器中的触摸事件功能实际上并不意味着用户使用触摸设备(例如,现代派没有削减它)。如果设备有鼠标,正确回答问题的代码应该返回false,否则为true。对于有鼠标和触摸的设备,它应该返回false(而不仅仅是触摸)。

顺便提一句,我的触屏界面可能也适用于只使用键盘的设备,所以我希望能检测到的更多的是缺少鼠标。

为了更清楚地说明这一点,下面是我希望实现的API:

// 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);
提问于
用户回答回答于

主要的问题是,有以下不同类别的设备/用例:

  1. 鼠标和键盘(桌面)
  2. 仅触控(电话/平板电脑)
  3. 鼠标、键盘和触摸(触摸笔记本)
  4. 触摸和键盘(平板电脑上的蓝牙键盘)
  5. 仅鼠标(禁用用户/浏览首选项)
  6. 仅键盘(禁用用户/浏览首选项)
  7. 触摸和鼠标(从GalaxyNote 2笔中悬停事件)

更糟糕的是,我们可以从这些类中的一些类过渡到另一些类(鼠标中的插头,连接到键盘上),或者用户可能会出现在普通的笔记本电脑上,直到他们伸出手来触摸屏幕。

正确地假设浏览器中存在事件构造函数并不是向前迈进的好方法(而且有点不一致)。此外,除非正在跟踪一个非常特定的事件,或者只是试图排除上面的几个类,否则使用事件本身并不是完全证明。

例如,假设已经发现用户已经发出了真正的Mousemove(而不是来自触摸事件的假的)

无论哪种方式,你都在增加玻璃的时间,因为你必须等待事件的爆发。

但是,当你的高贵用户决定拔掉鼠标,完全触碰时会发生什么呢?你会等待他触摸你现在拥挤的界面,然后在他努力找出你现在拥挤的UI之后马上改变它吗?

以子弹的形式,引用stucox

  • 我们要检测老鼠的存在
  • 事件触发前AE可能无法检测到
  • 因此,我们正在检测的是,如果在这个会话中使用了鼠标-它不会立即从页面加载
  • 我们可能也无法检测到没有鼠标--在真之前它是未知的(我认为这比在被证实之前设置为false更有意义)。
  • 而且我们可能无法检测到鼠标是否在会话中间断开连接--这将与用户放弃鼠标无法区分。

这将使你得出以下结论:

跟踪给定用户的当前功能是复杂的、不可靠的,而且值得怀疑。

但是,渐进增强的思想在这里非常适用。构建一个无论用户上下文如何都能顺利工作的体验。然后根据浏览器特性/媒体查询进行假设,以添加在假设上下文中相对的功能。鼠标的存在只是不同设备上不同用户体验网站的众多方式之一。在它的内核中创建一些有价值的东西,不要太担心人们如何点击按钮。

用户回答回答于

在文档上侦听Mousemove事件如何?然后,直到你听到这个事件,你就会假设设备只是触控或键盘。

var mouseDetected = false;
function onMouseMove(e) {
  unlisten('mousemove', onMouseMove, false);
  mouseDetected = true;
  // initializeMouseBehavior();
}
listen('mousemove', onMouseMove, false);

(在哪里listenunlisten委托给addEventListenerattachEvent(视情况而定)

扫码关注云+社区