Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
479 views
in Technique[技术] by (71.8m points)

javascript - 检测浏览器没有鼠标并且仅是触摸式(Detecting that the browser has no mouse and is touch-only)

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).(我正在开发一个Web应用程序(不是一个包含有趣文本页面的网站),其触摸(鼠标单击时隐藏了屏幕)和鼠标(很大程度上取决于悬停预览)的界面非常不同。)

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).(浏览器中的触摸事件功能实际上并不意味着用户正在使用触摸设备(例如,Modernizr不会对其进行裁剪)。) The code that correctly answers the question should return false if the device has a mouse, true otherwise.(如果设备有鼠标,则正确回答该问题的代码应返回false,否则返回true。) For devices with mouse and touch, it should return false (not touch only)(对于具有鼠标和触摸功能的设备,它应返回false(不仅限于触摸)) 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:(为了使需求更加清楚,这是我要实现的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);   ask by nraynaud translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

The main trouble is that you have the following different classes of devices/use cases:(主要的麻烦是您具有以下不同类别的设备/用例:)

Mouse and keyboad (desktop)(鼠标和键盘(桌面)) Touch only (phone/tablet)(仅触摸(手机/平板电脑)) Mouse, keyboard, and touch (touch laptops)(鼠标,键盘和触摸(触摸笔记本电脑)) Touch and keyboard (bluetooth keyboard on tablet)(触摸和键盘(平板电脑上的蓝牙键盘)) Mouse only (Disabled user/browsing preference)(仅鼠标(禁用的用户/浏览首选项)) Keyboard only (Disabled user/browsing preference)(仅键盘(禁用的用户/浏览首选项)) Touch and mouse (ie hover events from Galaxy Note 2 pen)(触摸和鼠标(例如,Galaxy Note 2笔的悬停事件)) 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/ ).(例如,假设您发现用户发出了一次真正的鼠标移动(不是触摸事件中的错误鼠标移动,请参见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?(但是,当贵族用户决定要拔出鼠标并进行全面触摸时,会发生什么情况?您是否等待他触摸您现在拥挤的界面,然后在他努力确定现在拥挤的UI之后立即对其进行更改?) In bullet form, quoting stucox at https://github.com/Modernizr/Modernizr/issues/869#issuecomment-15264101(以项目符号形式在https://github.com/Modernizr/Modernizr/issues/869#issuecomment-15264101上引用stucox) We want to detect the presence of a mouse(我们要检测鼠标的存在) Ae probably can't detect before an event is fired(在事件触发前,AE可能无法检测到) 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)(我们可能还无法检测到没有鼠标-在定义为true之前,它是不确定的(我认为这比在经过验证之前将其设置为false更有意义)。) 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!(顺便说一句:浏览器不知道用户何时插入鼠标/连接到键盘,但没有将其暴露给JavaScript。) 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.(在其内核中创建具有优点的东西,不必太担心人们如何单击按钮。)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...