Javascript 用Jquery检测触摸设备

我花了相当多的时间在网上研究各种检测触摸设备的方法，但这个令人惊讶的复杂问题似乎没有一个明确的答案。基于此，我决定采用以下方法

// Run immediately and assign a global variable (touch_enabled) so it is accessible anywhere.

// First try to detect (not entirely reliable)
window.touch_enabled = !!('ontouchstart' in window) || !!('onmsgesturechange' in window);

// Overwrite/set touch enabled to false on mousemove
$(window).on('mousemove', function() { window.touch_enabled = false; });

// Overwrite/set touch enabled to true on touchstart
$(window).on('touchstart', function () { window.touch_enabled = true; });

我想知道是否有人能指出这种方法的任何问题。我还没有对它进行现场测试，并将立即进行测试，但如有任何其他意见，将不胜感激

下面是一个快速演示

window.touch\u enabled=！！（窗口中的“ontouchstart”）| |！！（“OnMsgTestureChange”在窗口中）；
$（window）.on（'mousemove'，function（）{window.touch_enabled=false；}）；
$（window）.on（'touchstart'，函数（）{window.touch\u enabled=true；}）；
setInterval（function（）{$（'.output'）.text（window.touch_启用）；}，200）

Touch Enabled=
考虑到当今浏览器API的局限性，我认为您的方法是明智的。我有类似的代码，可能会建议进行一些更改：

track window.pointer_单独启用（不要假设触摸和指针是互斥的）
使用jQuery的
.one（）
只绑定一次触摸/鼠标事件
触发“触摸检测”和“鼠标检测”事件，以便在页面加载后发现输入法时，您可以调整UI

// assume event handlers mean we have touch input
window.have_touch = !!('ontouchstart' in window) || !!('onmsgesturechange' in window);

// bluntly assume only one input method
window.have_pointer = !window.have_touch;

// react to reality
$(window).one('mousemove', function(e) {
  window.have_pointer = true;
  $(window).trigger('found_pointer');
});
$(window).one('touchstart', function(e) {
  window.have_touch = true;
  $(window).trigger('found_touch');
});


我不认为一般情况下必须（甚至不应该）事先进行区分——对这两个事件进行编码可以使事情在所有情况下都能正常工作，而且会更加可靠：

$('#element').on('mousedown touchstart', function() { ... });

但在某些情况下，事件的起源必须是已知的，例如当必须处理鼠标或触摸位置时。然后，可以在事件发生时进行区分：

$('#element').on('mousedown touchstart', function(e) {

var touch = e.originalEvent.touches;
var pageX = touch ? touch[0].pageX : e.pageX;

....

});

希望这能有所帮助，到目前为止，它对我很有效。
顺便说一句，我在演示中使用了一个计时器来测试触摸设备是否切换到输入设备（例如，将鼠标插入MS Surface平板电脑）。任何人有一个，请让我知道它是如何工作的！你可以考虑像Modernizr这样的图书馆来帮助你。我会读这个，哭，重新考虑你的方法。安迪-我试图避免加载整个库来进行简单的触摸检测。另外，Modernizer似乎也不可靠。使用.one（）方法很有趣。然而，如果你在一个表面平板电脑上，并且你插上和拔下鼠标，会发生什么呢？不同的操作系统和浏览器处理这个问题的方式不同。现代化图书馆对此进行了一些很好的讨论。没有明显的正确方法，所以我寻找运动来检测“第二个”输入法。在我的例子中，我实际上需要事先知道-我正在构建自定义表单元素（如选择菜单），其工作/显示方式会有所不同，这取决于您是否使用触摸。