我编写了一个jQuery插件，可以在桌面和移动设备上使用。我想知道是否有一种方法可以用JavaScript来检测设备是否具有触摸屏功能。我使用jquery-mobile.js来检测触摸屏事件，它适用于iOS, Android等，但我也想根据用户的设备是否有触摸屏来编写条件语句。
这可能吗?
当前回答
jQuery v1.11.3
答案中有很多有用的信息。但是，最近我花了很多时间试图将所有事情结合到一个有效的解决方案中，以完成两件事:
检测正在使用的设备是触摸屏类型的设备。 检测设备被窃听。
除了这篇文章和用Javascript检测触摸屏设备，我发现Patrick Lauke的这篇文章非常有用:https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/
这是代码…
$(document).ready(function() {
//The page is "ready" and the document can be manipulated.
if (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0))
{
//If the device is a touch capable device, then...
$(document).on("touchstart", "a", function() {
//Do something on tap.
});
}
else
{
null;
}
});
重要!*。On (events [， selector] [， data]， handler)方法需要有一个选择器，通常是一个元素，它可以处理“touchstart”事件，或任何其他与触摸相关的类似事件。在本例中，它是超链接元素“a”。
现在，你不需要在JavaScript中处理常规的鼠标点击，因为你可以使用CSS来处理这些事件，使用超链接“a”元素的选择器，如下所示:
/* unvisited link */
a:link
{
}
/* visited link */
a:visited
{
}
/* mouse over link */
a:hover
{
}
/* selected link */
a:active
{
}
注意:还有其他的选择器…
其他回答
jQuery v1.11.3
答案中有很多有用的信息。但是，最近我花了很多时间试图将所有事情结合到一个有效的解决方案中，以完成两件事:
检测正在使用的设备是触摸屏类型的设备。 检测设备被窃听。
除了这篇文章和用Javascript检测触摸屏设备，我发现Patrick Lauke的这篇文章非常有用:https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/
这是代码…
$(document).ready(function() {
//The page is "ready" and the document can be manipulated.
if (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0))
{
//If the device is a touch capable device, then...
$(document).on("touchstart", "a", function() {
//Do something on tap.
});
}
else
{
null;
}
});
重要!*。On (events [， selector] [， data]， handler)方法需要有一个选择器，通常是一个元素，它可以处理“touchstart”事件，或任何其他与触摸相关的类似事件。在本例中，它是超链接元素“a”。
现在，你不需要在JavaScript中处理常规的鼠标点击，因为你可以使用CSS来处理这些事件，使用超链接“a”元素的选择器，如下所示:
/* unvisited link */
a:link
{
}
/* visited link */
a:visited
{
}
/* mouse over link */
a:hover
{
}
/* selected link */
a:active
{
}
注意:还有其他的选择器…
看看这篇文章，它给出了一个非常好的代码片段，告诉你当检测到触摸设备时该怎么做，或者如果touchstart事件被调用了该怎么做:
$(function(){
if(window.Touch) {
touch_detect.auto_detected();
} else {
document.ontouchstart = touch_detect.surface;
}
}); // End loaded jQuery
var touch_detect = {
auto_detected: function(event){
/* add everything you want to do onLoad here (eg. activating hover controls) */
alert('this was auto detected');
activateTouchArea();
},
surface: function(event){
/* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */
alert('this was detected by touching');
activateTouchArea();
}
}; // touch_detect
function activateTouchArea(){
/* make sure our screen doesn't scroll when we move the "touchable area" */
var element = document.getElementById('element_id');
element.addEventListener("touchstart", touchStart, false);
}
function touchStart(event) {
/* modularize preventing the default behavior so we can use it again */
event.preventDefault();
}
试图检测触控的最大“陷阱”是同时支持触控和触控板/鼠标的混合设备。即使你能够正确地检测用户的设备是否支持触摸，你真正需要做的是检测用户当前使用的输入设备。这里有一份关于这个挑战的详细报告和可能的解决方案。
基本上，判断用户是触摸屏幕还是使用鼠标/触控板的方法是在页面上注册touchstart和mouseover事件:
document.addEventListener('touchstart', functionref, false) // on user tap, "touchstart" fires first
document.addEventListener('mouseover', functionref, false) // followed by mouse event, ie: "mouseover"
触摸动作会触发这两个事件，尽管前者(touchstart)在大多数设备上总是先触发。因此，依靠这个可预测的事件序列，您可以创建一种机制，动态地向文档根添加或删除一个can-touch类，以反映当前用户在文档上的输入类型:
;(function(){
var isTouch = false //var to indicate current input type (is touch versus no touch)
var isTouchTimer
var curRootClass = '' //var indicating current document root class ("can-touch" or "")
function addtouchclass(e){
clearTimeout(isTouchTimer)
isTouch = true
if (curRootClass != 'can-touch'){ //add "can-touch' class if it's not already present
curRootClass = 'can-touch'
document.documentElement.classList.add(curRootClass)
}
isTouchTimer = setTimeout(function(){isTouch = false}, 500) //maintain "istouch" state for 500ms so removetouchclass doesn't get fired immediately following a touch event
}
function removetouchclass(e){
if (!isTouch && curRootClass == 'can-touch'){ //remove 'can-touch' class if not triggered by a touch event and class is present
isTouch = false
curRootClass = ''
document.documentElement.classList.remove('can-touch')
}
}
document.addEventListener('touchstart', addtouchclass, false) //this event only gets called when input type is touch
document.addEventListener('mouseover', removetouchclass, false) //this event gets called when input type is everything from touch to mouse/ trackpad
})();
详情请点击这里。
更新:在将整个功能检测库拉入你的项目之前，请阅读下面blmstr的回答。检测实际的触摸支持更加复杂，Modernizr只涵盖了一个基本的用例。
Modernizr是一种很棒的轻量级方法，可以在任何网站上进行各种特征检测。
它只是为每个特性在html元素中添加类。
然后你可以在CSS和JS中轻松地瞄准这些功能。例如:
html.touch div {
width: 480px;
}
html.no-touch div {
width: auto;
}
和Javascript (jQuery示例):
$('html.touch #popup').hide();
如果你测试document.documentElement中支持touchstart，这就很简单了
var x = 'touchstart'在document.documentElement; console.log (x) //如果支持返回true //否则返回false
