我编写了一个jQuery插件，可以在桌面设备和移动设备上使用。我想知道是否有一种方法可以检测设备是否具有触摸屏功能。我正在使用jquery-mobile.js来检测触摸屏事件，它可以在iOS，Android等上运行，但我也想根据用户的设备是否有触摸屏来编写条件语句。
这可能吗？
答案 0 :(得分：605)
您是否尝试过使用此功能？ （这与Modernizr过去常用的相同。）
function is_touch_device() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
更新1
document.createEvent("TouchEvent")已开始在最新的Chrome中返回true（第17行）。 Modernizr不久前更新了这个。 Check Modernizr test out here
更新您的功能，使其正常工作：
function is_touch_device() {
return 'ontouchstart' in window;
}
更新2
我发现以上内容不适用于IE10（在MS Surface上返回false）。这是修复：
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| 'onmsgesturechange' in window; // works on IE10 with some false positives
};
更新3
'onmsgesturechange' in window将在某些IE桌面版本中返回true，因此不可靠。这更加可靠：
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| navigator.maxTouchPoints; // works on IE10/11 and Surface
};
更新2018年
时间流逝，有新的更好的方法来测试它。我基本上提取并简化了Modernizr的检查方式：
function is_touch_device() {
var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
var mq = function(query) {
return window.matchMedia(query).matches;
}
if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
return true;
}
// include the 'heartz' as a way to have a non matching MQ to help terminate the join
// https://git.io/vznFH
var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
return mq(query);
}
他们在这里使用非标准的touch-enabled媒体查询功能，我认为这有点奇怪和不好的做法。但是，嘿，在现实世界中，我猜它有效。在将来（当所有人都支持它们时），这些媒体查询功能可以为您提供相同的结果：pointer和hover。
查看source of how Modernizr are doing it。
有关解释触摸检测问题的好文章，请参阅： Stu Cox: You Can't Detect a Touchscreen
答案 1 :(得分：136)
更新：在将整个功能检测库提取到项目中之前，请先阅读下面的blmstr's answer。检测实际触摸支持更复杂，而Modernizr仅涵盖基本用例。
Modernizr是一种在任何网站上进行各种功能检测的轻量级方式。
它只是为每个功能的html元素添加类。
然后，您可以在CSS和JS中轻松地定位这些功能。例如：
html.touch div {
width: 480px;
}
html.no-touch div {
width: auto;
}
和Javascript（jQuery示例）：
$('html.touch #popup').hide();
答案 2 :(得分：117)
由于Modernizr在Windows Phone 8 / WinRT上没有检测到IE10，因此一个简单的跨浏览器解决方案是：
var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;
您只需要检查一次，因为设备不会突然支持或不支持触摸，因此只需将其存储在变量中，以便您可以更有效地使用它多次。
答案 3 :(得分：34)
使用上面的所有评论我已经汇编了以下适合我需要的代码：
var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));
我在iPad，Android（浏览器和Chrome），Blackberry Playbook，iPhone 4s，Windows Phone 8，IE 10，IE 8，IE 10（带触摸屏的Windows 8），Opera，Chrome和Firefox上进行了测试。
它目前在Windows Phone 7上失败，但我还没有找到该浏览器的解决方案。
希望有人觉得这很有用。
答案 4 :(得分：20)
我喜欢这个：
function isTouchDevice(){
return typeof window.ontouchstart !== 'undefined';
}
alert(isTouchDevice());
答案 5 :(得分：17)
如果您使用Modernizr，则可以很容易地使用前面提到的Modernizr.touch。
但是，为了安全起见，我更喜欢使用Modernizr.touch和用户代理测试的组合。
var deviceAgent = navigator.userAgent.toLowerCase();
var isTouchDevice = Modernizr.touch ||
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/) ||
deviceAgent.match(/(iemobile)/) ||
deviceAgent.match(/iphone/i) ||
deviceAgent.match(/ipad/i) ||
deviceAgent.match(/ipod/i) ||
deviceAgent.match(/blackberry/i) ||
deviceAgent.match(/bada/i));
if (isTouchDevice) {
//Do something touchy
} else {
//Can't touch this
}
如果您不使用Modernizr，只需将上面的Modernizr.touch函数替换为('ontouchstart' in document.documentElement)
另请注意，测试用户代理iemobile将为您提供比Windows Phone更广泛的检测到的Microsoft移动设备。
答案 6 :(得分：14)
我们尝试了现代化实现，但检测到触摸事件不再一致（IE 10在Windows桌面上有触摸事件，IE 11可以工作，因为已经删除了触摸事件并添加了指针api）。
所以我们决定将网站优化为触摸网站，只要我们不知道用户的输入类型。这比任何其他解决方案都更可靠。
我们的研究表明，大多数桌面用户在点击之前都会将鼠标移动到屏幕上，因此我们可以在他们点击或悬停任何内容之前检测它们并更改行为。
这是我们代码的简化版本：
var isTouch = true;
window.addEventListener('mousemove', function mouseMoveDetector() {
isTouch = false;
window.removeEventListener('mousemove', mouseMoveDetector);
});
答案 7 :(得分：9)
<强> Working Fiddle
我已经实现了这个目标;
function isTouchDevice(){
return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}
if(isTouchDevice()===true) {
alert('Touch Device'); //your logic for touch device
}
else {
alert('Not a Touch Device'); //your logic for non touch device
}
答案 8 :(得分：9)
有一些东西比检查他们是否有触摸屏更好，是检查他们是否正在使用它，以及更容易检查。
if (window.addEventListener) {
var once = false;
window.addEventListener('touchstart', function(){
if (!once) {
once = true;
// Do what you need for touch-screens only
}
});
}
答案 9 :(得分：6)
由于引入了 互动媒体功能 ，您可以轻松做到：
if(window.matchMedia("(any-pointer: coarse)").matches) {
// touchscreen
}
https://www.w3.org/TR/mediaqueries-4/#descdef-media-any-pointer
答案 10 :(得分：6)
即使在Windows Surface平板电脑中也能正常运行！
function detectTouchSupport {
msGesture = window.navigator && window.navigator.msPointerEnabled && window.MSGesture,
touchSupport = (( "ontouchstart" in window ) || msGesture || window.DocumentTouch && document instanceof DocumentTouch);
if(touchSupport) {
$("html").addClass("ci_touch");
}
else {
$("html").addClass("ci_no_touch");
}
}
答案 11 :(得分：4)
我使用上面的代码来检测是否触摸，因此我的fancybox iframe将显示在台式计算机上而不是触摸上。我注意到，当单独使用blmstr的代码时，Opera Mini for Android 4.0仍然作为非触摸设备注册。 （有谁知道为什么？）
我最终使用了：
<script>
$(document).ready(function() {
var ua = navigator.userAgent;
function is_touch_device() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
if ((is_touch_device()) || ua.match(/(iPhone|iPod|iPad)/)
|| ua.match(/BlackBerry/) || ua.match(/Android/)) {
// Touch browser
} else {
// Lightbox code
}
});
</script>
答案 12 :(得分：4)
实际上，我研究了这个问题并考虑了所有情况。因为这也是我项目中的大问题。因此，我达到以下功能，它适用于所有设备上所有浏览器的所有版本：
const isTouchDevice = () => {
const prefixes = ['', '-webkit-', '-moz-', '-o-', '-ms-', ''];
const mq = query => window.matchMedia(query).matches;
if (
'ontouchstart' in window ||
(window.DocumentTouch && document instanceof DocumentTouch)
) {
return true;
}
return mq(['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join(''));
};
提示 ：当然，isTouchDevice仅返回boolean值。
答案 13 :(得分：4)
最大的＆＃34;陷阱＆＃34;尝试检测触摸是在支持触摸和触控板/鼠标的混合设备上。即使您能够正确检测用户的设备是否支持触摸，您真正需要做的是检测用户当前使用的输入设备。已经详细介绍了这一挑战并a possible solution here。
基本上，确定用户是仅触摸屏幕还是使用鼠标/触控板的方法是在页面上同时注册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
})();
更多详情here。
答案 14 :(得分：3)
不，这是不可能的。给出的优秀答案只是部分的，因为任何给定的方法都会产生误报和漏报。由于OS API，即使浏览器也不知道是否存在触摸屏，并且事实可能会在浏览器会话期间发生变化，尤其是KVM类型的安排。
请参阅这篇优秀文章中的更多细节：
http://www.stucox.com/blog/you-cant-detect-a-touchscreen/
该文章建议您重新考虑使您想要检测触摸屏的假设，它们可能是错误的。 （我检查了自己的应用程序，我的假设确实是错误的！）
文章的结论是：
对于布局，假设每个人都有触摸屏。鼠标用户可以使用 大型UI控件比触摸用户更容易使用 那些。悬停状态也是如此。
对于活动和互动，假设任何人都可能有触摸屏。 将键盘，鼠标和触摸交互相互实现， 确保没有阻止对方。
答案 15 :(得分：3)
查看此post，它提供了一个非常好的代码段，用于检测触摸设备时的操作或调用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();
}
答案 16 :(得分：3)
我会避免使用屏幕宽度来确定设备是否是触控设备。有触摸屏远大于699px，想想Windows 8. Navigatior.userAgent可能很好地覆盖虚假的postives。
我建议您在Modernizr上查看this issue。
您是否想要测试设备是否支持触摸事件还是触摸设备。不幸的是，这不是一回事。
答案 17 :(得分：2)
看起来Chrome 24现在支持触摸事件，可能适用于Windows 8.因此，此处发布的代码不再有效。我现在不是试图检测浏览器是否支持触摸，而是绑定触摸和点击事件，并确保只调用一个：
myCustomBind = function(controlName, callback) {
$(controlName).bind('touchend click', function(e) {
e.stopPropagation();
e.preventDefault();
callback.call();
});
};
然后称之为：
myCustomBind('#mnuRealtime', function () { ... });
希望这有帮助！
答案 18 :(得分：2)
其中许多工作但要么需要jQuery，要么javascript linters抱怨语法。考虑到您的初始问题要求提供＆＃34; JavaScript＆＃34; （不是jQuery，而不是Modernizr）解决这个问题的方法，这是一个每次都有效的简单函数。它也尽可能少。
function isTouchDevice() {
return !!window.ontouchstart;
}
console.log(isTouchDevice());
我提到的最后一个好处是，此代码与框架和设备无关。享受！
答案 19 :(得分：1)
jQuery v1.11.3
提供的答案中有很多好的信息。但是，最近我花了很多时间尝试将所有内容组合成一个有效的解决方案，以完成两件事：
除了这篇文章和Detecting touch screen devices with 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 )方法需要有一个选择器，通常是一个元素，可以处理＆＃34; touchstart＆＃34;事件，或与触摸相关的任何其他类似事件。在这种情况下，它是超链接元素＆＃34; a＆＃34;。
现在，您不需要在JavaScript中处理常规鼠标点击，因为您可以使用CSS来使用超链接的选择器处理这些事件＆＃34; a＆＃34;像这样的元素：
/* unvisited link */
a:link
{
}
/* visited link */
a:visited
{
}
/* mouse over link */
a:hover
{
}
/* selected link */
a:active
{
}
注意：还有其他选择器......
答案 20 :(得分：1)
实际答案似乎是考虑上下文的答案：
1）公共网站（无登录）
对UI进行编码以同时使用这两个选项。
2）登录网站
捕获登录表单上是否发生鼠标移动，并将其保存到隐藏输入中。该值与登录凭据一起传递并添加到用户的会话，因此可以在会话期间使用。
Jquery仅添加到登录页面：
$('#istouch').val(1); // <-- value will be submitted with login form
if (window.addEventListener) {
window.addEventListener('mousemove', function mouseMoveListener(){
// Update hidden input value to false, and stop listening
$('#istouch').val(0);
window.removeEventListener('mousemove', mouseMoveListener);
});
}
（给@Dave Burt + 1，给@Martin Lantzsch +1回答）
答案 21 :(得分：1)
由于混合设备使用触摸和鼠标输入的组合，您需要能够动态更改状态/变量，该状态/变量控制是否应该在用户触摸时运行一段代码用户与否。
触控设备也会点按mousemove。
touchstart事件被触发，然后将其设置为true。在Safari iOS和Chrome for Android上进行了测试。
注意：不能100％确定MS Surface等的指针事件
const supportsTouch = 'ontouchstart' in window;
let isUsingTouch = false;
// `touchstart`, `pointerdown`
const touchHandler = () => {
isUsingTouch = true;
document.addEventListener('mousemove', mousemoveHandler);
};
// use a simple closure to store previous time as internal state
const mousemoveHandler = (() => {
let time;
return () => {
const now = performance.now();
if (now - time < 20) {
isUsingTouch = false;
document.removeEventListener('mousemove', mousemoveHandler);
}
time = now;
}
})();
// add listeners
if (supportsTouch) {
document.addEventListener('touchstart', touchHandler);
} else if (navigator.maxTouchPoints || navigator.msMaxTouchPoints) {
document.addEventListener('pointerdown', touchHandler);
}
答案 22 :(得分：1)
因此，在检测触摸/非触摸设备方面存在着巨大的争论。窗口平板电脑的数量和平板电脑的大小正在增加，这给我们的Web开发人员带来了另一组头痛。
我已经使用blmstr's answer并测试了菜单。菜单的工作方式如下：当页面加载时，脚本将检测这是触摸设备还是非触摸设备。基于此菜单可以在悬停（非触摸）或单击/轻击（触摸）上工作。
在大多数情况下，blmstr的脚本似乎运行良好（特别是2018年的脚本）。但是仍然有一个设备在不存在时会被检测为触摸，反之亦然。
由于这个原因，我做了一些挖掘工作，thanks to this article我将blmstr的第4个脚本中的几行替换为：
function is_touch_device4() {
if ("ontouchstart" in window)
return true;
if (window.DocumentTouch && document instanceof DocumentTouch)
return true;
return window.matchMedia( "(pointer: coarse)" ).matches;
}
alert('Is touch device: '+is_touch_device4());
console.log('Is touch device: '+is_touch_device4());
由于锁定设备的供应量有限，因此无法进行测试，但是到目前为止，这种方法效果很好。
如果拥有台式触摸设备（例如Surface Tablet）的任何人都可以确认脚本是否可以正常工作，我将不胜感激。
现在就支持指针而言：似乎支持粗媒体查询。我保留了上面的代码行，因为我在移动Firefox上遇到了（由于某种原因）问题，但是媒体查询上面的代码行了。
谢谢
答案 23 :(得分：1)
您可以安装现代化器并使用简单的触摸事件。这是非常有效的，适用于我测试过的所有设备，包括windows surface！
我创建了jsFiddle
function isTouchDevice(){
if(Modernizr.hasEvent('touchstart') || navigator.userAgent.search(/Touch/i) != -1){
alert("is touch");
return true;
}else{
alert("is not touch");
return false;
}
}
答案 24 :(得分：1)
对于如何在Javascript中检测页面是否显示在触摸屏设备上，我也遇到了很多不同的选择。 IMO，截至目前，没有真正的选择来正确检测选项。 浏览器会在桌面计算机上报告触摸事件（因为操作系统可能已准备就绪），或者某些解决方案无法在所有移动设备上运行。
最后，我意识到我从一开始就遵循了错误的方法： 如果我的页面在触摸和非触摸设备上看起来类似，我可能不必担心检测到属性： 我的方案是通过触摸设备上的按钮停用工具提示，因为它们会导致双击，我只想点击一下即可激活按钮。
我的解决方案是重构视图，以便不需要按钮上的工具提示，最后我不需要使用所有方法从Javascript中检测触摸设备有他们的缺点。
答案 25 :(得分：1)
支持所有浏览器，除桌面版Firefox外总是 TRUE ，因为Firefox支持桌面支持响应式设计，即使你点击了触摸按钮也不行！
我希望Mozilla能在下一版本中解决这个问题。
我使用的是Firefox 28桌面。
function isTouch()
{
return !!("ontouchstart" in window) || !!(navigator.msMaxTouchPoints);
}
答案 26 :(得分：1)
我用：
if(jQuery.support.touch){
alert('Touch enabled');
}
答案 27 :(得分：1)
var isTouchScreen = 'createTouch' in document;
或
var isTouchScreen = 'createTouch' in document || screen.width <= 699 ||
ua.match(/(iPhone|iPod|iPad)/) || ua.match(/BlackBerry/) ||
ua.match(/Android/);
答案 28 :(得分：0)
到目前为止，这似乎对我来说还不错：
//Checks if a touch screen
is_touch_screen = 'ontouchstart' in document.documentElement;
if (is_touch_screen) {
// Do something if a touch screen
}
else {
// Not a touch screen (i.e. desktop)
}
答案 29 :(得分：0)
快速记录那些可能想写window.ontouchstart !== undefined的人 - ＆gt;请使用micnic答案，因为undefined不是JavaScript中的关键字。如果开发写了类似的话，那就是大问题：
undefined = window.ontouchstart;
开发人员可以根据需要制作任何未定义的内容，您也可以检查window.ontouchstart = myNonExistingWord;
对那些给出这个答案的人不要不尊重：很确定我也在我的代码中写了这个;）
答案 30 :(得分：0)
当连接鼠标时，可以假定用户在相当高的命中率（我会说实际上是100％），用户在页面准备好之后将鼠标移动至少一小段距离 - 没有任何点击。下面的机制检测到这一点。如果检测到，我认为这是缺少触摸支持的标志，或者，如果支持，在使用鼠标时不太重要。如果未检测到，则假定触摸设备。
编辑此方法可能不适合所有目的。它可用于控制基于加载页面上的用户交互而激活的功能，例如图像查看器。下面的代码也会将mousemove事件绑定在没有鼠标的设备上，因为它现在很突出。其他方法可能更好。
粗略地说，它是这样的（抱歉jQuery，但在纯Javascript中类似）：
var mousedown, first, second = false;
var ticks = 10;
$(document).on('mousemove', (function(e) {
if(UI.mousechecked) return;
if(!first) {
first = e.pageX;
return;
}
if(!second && ticks-- === 0) {
second = e.pageX;
$(document).off('mousemove'); // or bind it to somewhat else
}
if(first && second && first !== second && !mousedown){
// set whatever flags you want
UI.hasmouse = true;
UI.touch = false;
UI.mousechecked = true;
}
return;
}));
$(document).one('mousedown', (function(e) {
mousedown = true;
return;
}));
$(document).one('mouseup', (function(e) {
mousedown = false;
return;
}));
答案 31 :(得分：0)
范围jQuery support对象：
jQuery.support.touch = 'ontouchend' in document;
现在你可以在任何地方查看它，例如：
if( jQuery.support.touch )
// do touch stuff
答案 32 :(得分：0)
您可以使用以下代码：
function isTouchDevice() {
var el = document.createElement('div');
el.setAttribute('ongesturestart', 'return;'); // or try "ontouchstart"
return typeof el.ongesturestart === "function";
}
来源：Detecting touch-based browsing和@mplungjan post。
上述解决方案基于detecting event support without browser sniffing文章。
您可以通过以下test page检查结果。
请注意，上述代码仅测试浏览器是否支持触摸，而不是设备。因此，如果您的笔记本电脑配有触摸屏，则您的浏览器可能无法支持触摸事件。 recent Chrome supports touch events，但其他浏览器可能没有。
您也可以尝试：
if (document.documentElement.ontouchmove) {
// ...
}
但它可能不适用于iPhone设备。
答案 33 :(得分：0)
public class UtilSharedPrefernce {
public class UtilSharedPrefernce {
private static UtilSharedPrefernce mInstance;
private SharedPreferences mMyPreferences;
private UtilSharedPrefernce(){ }
public static UtilSharedPrefernce getInstance(){
if (mInstance == null)
mInstance = new UtilSharedPrefernce();
return mInstance;
}
public void Initialize(Context ctxt){
mMyPreferences = PreferenceManager.getDefaultSharedPreferences(ctxt);
}
public void writePreference(String key, String value){
SharedPreferences.Editor e = mMyPreferences.edit();
e.putString(key, value);
e.apply();
}
public String readPreference(String key){
return mMyPreferences.getString(key, "");
}
}
答案 34 :(得分：0)
var isTouchDevice =
(('ontouchstart' in window) ||
(navigator.MaxTouchPoints > 0) ||
(navigator.msMaxTouchPoints > 0));
if(!isTouchDevice){
/* Code for touch device /*
}else{
/* Code for non touch device */
}
玩得开心！
答案 35 :(得分：-1)
如果你测试document.documentElement支持touchstart那么这么简单
var x = 'touchstart' in document.documentElement;
console.log(x)
// return true if is supported
// else return false
答案 36 :(得分：-2)
虽然它只是在alpha中，jquery mobile framework值得一试。它将在移动浏览器中规范化这些类型的事件。也许看看他们在做什么。我假设jquery-mobile.js与此框架不同。
答案 37 :(得分：-3)
这种方式对我有用，它等待第一次用户互动以确保它们在触摸设备上
var touchEnabled = false;
$(document.body).one('touchstart',
function(e){
touchEnabled=true;
$(document.documentElement).addClass("touch");
// other touch related init
//
}
);