我正在开发一个网页应用程序(不是一个有很多有趣的文本页面的网站),它有一个非常不同的触摸界面(点击时你的手指会隐藏屏幕)和鼠标(很大程度上依赖于悬停预览)。我怎样才能检测到我的用户没有鼠标来显示正确的界面呢?我打算给同时有鼠标和触摸屏的人留一个开关(就像一些笔记本电脑一样)。
浏览器中的触摸事件功能实际上并不意味着用户正在使用触摸设备(例如,Modernizr不支持它)。如果设备有鼠标,则正确回答问题的代码应返回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);
发布于 2012-02-09 04:00:30
如何侦听文档上的mousemove事件。然后,直到您听到该事件,您假定该设备是触摸或键盘。
var mouseDetected = false;
function onMouseMove(e) {
unlisten('mousemove', onMouseMove, false);
mouseDetected = true;
// initializeMouseBehavior();
}
listen('mousemove', onMouseMove, false);
(其中listen
和unlisten
根据需要委派给addEventListener
或attachEvent
。)
希望这不会导致太多的视觉干扰,如果你需要基于模式的大量重新布局,那就太糟糕了。
发布于 2012-02-14 08:41:41
既然您计划提供一种在界面之间进行切换的方法,那么简单地要求用户单击一个链接或按钮来“输入”应用程序的正确版本是否可行?然后你就可以记住他们对未来访问的偏好。它不是高科技,但它是100%可靠的:-)
发布于 2016-05-19 23:14:57
这对我来说在类似的情况下也是有效的。基本上,假设用户没有鼠标,直到你看到一小段连续的鼠标移动,没有鼠标向下或鼠标向上移动。不是很优雅,但很管用。
var mousedown = false;
var mousemovecount = 0;
function onMouseDown(e){
mousemovecount = 0;
mousedown = true;
}
function onMouseUp(e){
mousedown = false;
mousemovecount = 0;
}
function onMouseMove(e) {
if(!mousedown) {
mousemovecount++;
if(mousemovecount > 5){
window.removeEventListener('mousemove', onMouseMove, false);
console.log("mouse moved");
$('body').addClass('has-mouse');
}
} else {
mousemovecount = 0;
}
}
window.addEventListener('mousemove', onMouseMove, false);
window.addEventListener('mousedown', onMouseDown, false);
window.addEventListener('mouseup', onMouseUp, false);
https://stackoverflow.com/questions/7838680
复制相似问题