使用 Jquery 检测触摸设备

Question

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

// 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_enabled = !!('ontouchstart' in window) || !!('onmsgesturechange' in window);
$(window).on('mousemove', function() { window.touch_enabled = false; });
$(window).on('touchstart', function () { window.touch_enabled = true; });

setInterval(function() { $('.output').text(window.touch_enabled); }, 200);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Touch Enabled = <span class="output"></span>

Answer 1

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

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

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

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

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

....

});

希望对我有帮助，到目前为止对我来说效果很好。

Answer 2

鉴于当今浏览器 API 的局限性，我认为您的方法是明智的。我有类似的代码可能会建议一些更改：

1. 单独跟踪 window.pointer_enabled（不要假设触摸和指针是互斥的）
2. 使用 jQuery 的 .one() 只绑定一次触摸/鼠标事件

3. 触发“检测到触摸”和“检测到鼠标”事件，以便在页面加载后发现输入法感到惊讶时调整 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');
   });