我如何检查浏览器上的真实触摸支持

今天（或最近）Chrome Beta已更新至17，并且我发现我的网络应用程序中出现了一些funkiness。我注意到，这是因为一类是被添加到通常只从里面body元素，如果有触摸事件支持，我检查是这样的：我如何检查浏览器上的真实触摸支持

try { 
    document.createEvent("TouchEvent"); 
    _device.touch = true; 
    } catch (e) { 
    _device.touch = false; 
    }

果然，我可以创建并触发触摸事件在Chrome 17上。我的第一个想法是，哦，我可以检查触摸，并查看鼠标单击是否失败，因此，有一个鼠标，但MouseEvents也触发。

如何在没有用户代理嗅探的情况下检查它是一个真实的可触摸设备，而不仅仅是支持触摸事件的浏览器。

来源

2012-01-06 Oscar Godson

如果浏览器支持触摸，如果电脑不支持，那有什么关系？只需启用触摸和鼠标事件，并让用户选择。 – Blazemonger 2012-01-06 20:29:00

这可能会帮助你：http://stackoverflow.com/questions/2915833/how-to-check-browser-for-touchstart-support-using-js-jquery – sransara 2012-01-06 20:29:39

@ mblase75正是我在找什么。 OBV。触摸设备将会变得更加流行。 – 2012-01-06 20:30:58

尝试：

'ontouchstart' in document.documentElement

来源

2012-01-06 20:28:51 Ryan

很棒:)在Chrome 17，FF9，Safari 5，IE7-9上检查到 – 2012-01-06 20:48:39

在Chrome 20.中失败： -/ – 2012-06-27 10:18:23

@MarcelJackwerth：让我检查一下，当我回到Windows，但在Chrome 19上它似乎工作至少... ...至少在Android（姜饼） - – Ryan 2012-06-27 15:36:11

不是说你可能不希望改变人们的行为仅仅因为一个浏览器支持触摸“。例如。 Windows上的Chrome现在支持触摸，尽管不一定会附加触摸屏。即使连接了触摸屏，用户也不一定使用它，所以您需要小心改变。

因此，这其实就是要你为什么想知道：

你想知道你是否会得到touchstart/touchmove/touchend事件：有真的没有办法知道这前进肯定。例如。用户可以在加载页面后插入触摸屏。如果你对这些事件感兴趣，你应该听取他们的意见。
你想知道你是否应该显示你的网站的'移动'版本用户是否有触摸支持不是正确的信号 - 例如。具有触摸屏的Windows用户可能不需要您的移动网站。您可以使用UserAgent heurstics，但请给用户一个粘性的方式来切换站点的版本。
你想知道你是否应该调整你的用户界面，以便对触摸输入更友好例如，如果用户可能使用触摸，某些按钮应该更大。总的来说，最好总是设计多种指针类型 - 毕竟，当他们既有触摸又有鼠标时，你无法知道用户的指针首选项。但是，如果你真的想使用可用的指针硬件的知识，以提示做出最佳UI权衡，然后有新的CSS媒体查询可以使用：
- http://dev.w3.org/csswg/mediaqueries4/#pointer
- http://dev.w3.org/csswg/mediaqueries4/#hover

我在Chrome 21中添加了对Chrome的部分支持（crbug.com/123062）。据我所知，没有其他浏览器支持他们。

来源

2012-09-06 15:50:17

即使这是片状。 Chrome 25报告称，我在戴尔17英寸笔记本电脑上使用了指示器：课程和悬停：0。是的，笔记本电脑支持触摸屏，但关闭了，我正在使用鼠标。这是一个问题。（请注意，这开始影响我真正的网络应用程序：http://core.trac.wordpress.org/ticket/20614#comment:34） – Otto 2012-11-13 17:27:24

大家同意，很好区分移动和触摸。 Windows和10“平板电脑上的触摸屏不会需要触摸屏，但许多开发人员通过用ontouchstart等替换onclick事件来优化触摸屏，以避免等待双击。在这种情况下，指针检测会更有效，因为这会使设备带有触摸和指针。 – 2013-02-13 18:56:22

Otto：这就是如何定义媒体查询（根据所有指针设备的“最低能力”）根据反馈，我们更新了媒体查询规范，现在将返回指针：罚款，悬停：1在触摸屏笔记本电脑的情况下（但指针任何：粗糙将返回true），请参阅http://dev.w3.org/csswg/mediaqueries4/#mf-interaction。 '希望在Chrome 38中登陆：http://crbug.com/136119。 – 2014-07-24 14:03:26

('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch

来源

2014-12-01 11:48:12 lafeber

来源：https：//github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js#L40 – 2016-12-09 15:38:42

' （窗口中的'ontouchstart'）|| window.DocumentTouch && window.document instanceof DocumentTou ch || window.navigator.maxTouchPoints || window.navigator.msMaxTouchPoints？ true：false' – 2017-02-28 06:56:58

请注意，FF团队多次启用和禁用触摸支持，并最终决定在即将推出的52版本中启用它。 – 2017-02-28 06:58:05

-4

容易，不要。如果您正确设计网站，测试它的唯一有效原因是非触摸式浏览器，特别是旧版浏览器，不会发生错误，并且根据您实施触摸事件的方式，这可能不是问题（他们只是不会开火），但是当使用像锤子一样的图书馆时。JS，你需要创建锤对象的实例，像IE 8旧的浏览器将抛出一个错误，解决这个简单的方法是只换行代码在try和catch语句：

try { 
var Hammer = new HAMMER(); 
} catch (err) { 
'do what ever or do nothing, does not support touch or won't work at least anyway' 
}

在这将允许所有其他JavaScript代码继续。

来源

2014-12-12 00:22:08 user2971380

这没有任何意义，但也许我错过了一些东西。我需要（2年前）知道它的接触与否，所以我可以使用触摸事件，比如'touchstart'而不是'click'。点击'而不是'touchstart'会在点击时产生明显的延迟，只是在您使用鼠标点击时触发'touchstart'不会触发。即使它触发了'touchstart'的点击，这会让人感到非常讨厌，因为当你按下鼠标按钮的时候，它会做，而不是下来，然后像点击一样处理。 – 2014-12-16 01:48:52

此评论没有意义，因为它需要Hammer.js插件... – DutchKevv 2015-04-14 07:31:45

我如何检查浏览器上的真实触摸支持

回答

相关问题