使用 Javascript 检测触摸屏设备

IT技术 javascript jquery iphone android
2021-02-01 01:32:04

在 Javascript/jQuery 中，如何检测客户端设备是否有鼠标？

我有一个网站，当用户将鼠标悬停在某个项目上时，该网站会向上滑动一个小信息面板。我正在使用 jQuery.hoverIntent 来检测悬停，但这显然不适用于 iPhone/iPad/Android 等触摸屏设备。因此，在这些设备上，我想恢复为点击以显示信息面板。

6个回答
var isTouchDevice = 'ontouchstart' in document.documentElement;

注意：仅仅因为设备支持触摸事件并不一定意味着它只是一个触摸屏设备。许多设备（例如我的 Asus Zenbook）支持点击和触摸事件，即使它们没有任何实际的触摸输入机制。在设计触摸支持时，始终包括单击事件支持，并且永远不要假设任何设备都是唯一的一种或另一种。

'ontouchstart' in document.documentElement 在 BlackBerry 9300 上错误地返回 true
2021-03-14 01:32:04
正如 Modernizr 文档中所述，这仅检测浏览器功能，而不是设备功能……在没有触摸输入的设备上运行具有触摸功能的浏览器时，您会得到误报结果。我不知道有什么方法可以在本地检测设备触摸功能，而无需等待触摸事件发生。
2021-03-19 01:32:04
为了也检测 IE 10 触摸我正在使用: (window.navigator.msMaxTouchPoints || ('ontouchstart' in document.documentElement));
2021-04-05 01:32:04
@typhon 如果软件（Win 8、现代浏览器）支持触摸，这将永远是正确的——即使您使用的是不支持触摸的硬件（桌面、标准显示器、鼠标和键盘）。因此，此解决方案已过时。
2021-04-05 01:32:04
有趣的是ItsNotCamelCaseAsJsIsThroughout。我的意思是人们现在需要复制、粘贴和编辑代码...... :)
2021-04-10 01:32:04

发现 window.Touch 的测试在 android 上不起作用，但这样做： 

function is_touch_device() {
  return !!('ontouchstart' in window);
}

请参阅文章：使用 JavaScript 检测“触摸屏”设备的最佳方法是什么？

这确实会检测触摸屏，但要小心，因为它也为带触摸屏的笔记本电脑返回 TRUE。如果您试图区分用户是来自手机/平板电脑还是计算机/笔记本电脑，这可能是一个问题，因为对于带触摸屏的笔记本电脑，它返回 TRUE。
2021-03-30 01:32:04

+1 用于做hover和click两者。另一种方法可能是使用 CSS 媒体查询并仅对较小的屏幕/移动设备使用某些样式，这些设备最有可能具有触摸/点击功能。因此，如果您通过 CSS 拥有一些特定的样式，并且从 jQuery 中检查这些元素的移动设备样式属性，您可以将它们挂钩以编写特定于移动设备的代码。

见这里：http : //www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

问题是，如果您按屏幕宽度定位，那么当您旋转设备（让我们以 iphone 6+ 736x414 为例）时，它不会有相同的样式。所以不是最好的解决方案：/
2021-03-27 01:32:04
好的解决方案，您可能可以使用 one() 绑定执行悬停检查之类的操作，这样它只会在第一次触发时触发。
2021-04-07 01:32:04 
if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
    isTouch = true;
} else {
    isTouch = false;
}

无处不在！

这样做会更简单 isTouch = "ontouchstart" in window || navigator.msMaxTouchPoints;
2021-03-13 01:32:04
这与鼠标有什么关系？（实际问题）
2021-03-31 01:32:04 
return (('ontouchstart' in window)
      || (navigator.maxTouchPoints > 0)
      || (navigator.msMaxTouchPoints > 0));

使用 maxTouchPoints 和 msMaxTouchPoints 的原因：

Microsoft 已声明从 Internet Explorer 11 开始，可能会删除此属性的 Microsoft 供应商前缀版本 (msMaxTouchPoints)，并建议改用 maxTouchPoints。

来源：http : //ctrlq.org/code/19616-detect-touch-screen-javascript

这在谷歌浏览器开发人员工具模拟设备中工作并工作，谢谢
2021-03-21 01:32:04
其它你可能感兴趣的问题
上一篇为一个请求设置 HTTP 标头 下一篇Window.open 并通过post方法传递参数