输入设备功能

Paul Kinlan

Chrome 47 中新增了一项功能：InputDeviceCapabilities，可让您更轻松地了解用户与您网站的互动方式！我们先来回顾一下，了解为何这一点很重要。

DOM 输入事件是对低级别输入事件的抽象化，与实体设备输入（例如click 事件可以由鼠标、触摸屏或键盘触发。不过，存在一个问题：没有简单的方法可以获取负责事件的实际设备的详细信息。

此外，出于兼容性原因，某些类型的输入可能会生成更多“虚假”DOM 输入事件。当用户点按触摸屏（例如手机上的触摸屏）时，就会发生此类虚假 DOM 事件；它不仅会触发触摸事件，还会出于兼容性原因触发鼠标事件。

这会导致开发者在同时支持鼠标和触控输入时遇到问题。很难确定 mousedown 事件实际上是来自鼠标的新输入，还是仅仅是之前处理的 touchstart 事件的兼容性事件。

新的 InputDeviceCapabilities API 通过 UIEvent 上的 sourceCapabilities 对象提供有关输入事件底层来源的详细信息。
该对象具有 firesTouchEvents 属性，该属性会根据用户操作生成事件的方式设置为 true 或 false。

问题是：这应该在哪里使用？

除了指针事件之外，许多开发者目前都在触摸层中处理交互逻辑，以防止默认情况下创建“虚假”鼠标事件。这种设计在许多情况下都非常有效，并且无需更改即可利用 InputDeviceCapabilities。

但在某些情况下，您真的不想对触摸事件执行 preventDefault；例如，您仍希望点按发送“点击”事件并更改焦点。对于这些情况，您可以利用 MouseEvent.sourceCapabilities.firesTouchEvents 属性中存储的信息，开始将基于触摸和鼠标的事件的逻辑整合到一个模型中，该模型与您使用指针事件管理逻辑的方式类似。也就是说，您只需一组代码即可管理交互逻辑，并为开发者提供一种更简单的方式，在支持和不支持指针事件的浏览器之间共享逻辑。

function addMouseEventListener(target, type, handler, capture) {  
    target.addEventListener(type, function(e) {  
    if (e.sourceCapabilities.firesTouchEvents)  
        return false;  
    return handler(e);  
    }, capture);  
}

好消息是，Rick Byers 已为其添加了多重填充，因此您可以在大多数平台上使用它。

目前，此 API 的功能非常有限，主要用于解决识别从触摸事件派生的鼠标事件时遇到的特定问题。 甚至可以实例化 InputDeviceCapabilities 的实例；不过，它只包含 firesTouchEvents。未来，该 API 预计会扩展，以便您详细了解用户系统上的所有输入设备。我们非常期待收到您对用例的反馈。