javascript - 检测混合设备

Question

为支持鼠标和触摸的混合设备检测和绑定(bind)事件的推荐方法是什么？

例如，如果 Modernizr 有一个名为 hybrid 的测试，您可能会这样做:

var handler = null;

switch (true) {
  case (Modernizr.hybrid):
    handler = 'touchstart click';
    break;
  case (Modernizr.touch):
    handler = 'touchstart';
    break;
  default:
    handler = 'click';
    break;
}

Answer 1

正如@dandavis 在他的评论中所说，将它们全部绑定(bind)。

虽然你可以有点聪明:虽然你不知道用户是否想要使用触摸或鼠标(或键盘或其他输入设备)，你可以检测不同的事件模型(指针/touch) — 因此只绑定(bind)可能触发的事件。

虽然每个输入设备都可以触发 click 事件，因此请确保您始终绑定(bind)它们并且您已被覆盖:

if ('onpointerdown' in window) {
    // Bind to Pointer Events: `pointerdown`, `pointerup`, etc
}
else {
    // Bind to mouse events: `mousedown`, `mouseup`, etc

    if ('ontouchstart' in window) {
        // Bind to Touch Events: `touchstart`, `touchend`, etc
    }
}
// Bind to keyboard events: `keydown`, `keyup`, etc if
// necessary; can be problematic though
// Always bind to `click` events

更多详情:http://www.stucox.com/blog/the-golden-pattern-for-handling-touch-input/