首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >检测到浏览器没有鼠标并且只支持触摸

检测到浏览器没有鼠标并且只支持触摸
EN

Stack Overflow用户
提问于 2011-10-20 23:53:09
回答 14查看 57.2K关注 0票数 163

我正在开发一个网页应用程序(不是一个有很多有趣的文本页面的网站),它有一个非常不同的触摸界面(点击时你的手指会隐藏屏幕)和鼠标(很大程度上依赖于悬停预览)。我怎样才能检测到我的用户没有鼠标来显示正确的界面呢?我打算给同时有鼠标和触摸屏的人留一个开关(就像一些笔记本电脑一样)。

浏览器中的触摸事件功能实际上并不意味着用户正在使用触摸设备(例如,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);
EN

回答 14

Stack Overflow用户

发布于 2012-02-09 04:00:30

如何侦听文档上的mousemove事件。然后,直到您听到该事件,您假定该设备是触摸或键盘。

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

(其中listenunlisten根据需要委派给addEventListenerattachEvent。)

希望这不会导致太多的视觉干扰,如果你需要基于模式的大量重新布局,那就太糟糕了。

票数 63
EN

Stack Overflow用户

发布于 2012-02-14 08:41:41

既然您计划提供一种在界面之间进行切换的方法,那么简单地要求用户单击一个链接或按钮来“输入”应用程序的正确版本是否可行?然后你就可以记住他们对未来访问的偏好。它不是高科技,但它是100%可靠的:-)

票数 7
EN

Stack Overflow用户

发布于 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);
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7838680

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档