Question

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

// 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; });

我想知道是否有人可以指出这种方法的任何问题。我还没有对它进行现场测试，并且会立即进行测试，但任何第二意见都会受到赞赏。

以下是快速演示。

＆＃13;

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);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Touch Enabled = <span class="output"></span>

＆＃13;

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的局限性，我认为您的方法是明智的。我有类似的代码，可能会有一些变化：

单独跟踪window.pointer_enabled（不要假设触摸和指针互斥）
使用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');
});

使用Jquery检测触摸设备

2 个答案: