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/