输入设备功能

Chrome 47 推出了一项新功能,可让您更轻松地了解用户与您网站的互动方式:InputDeviceCapabilities!我们先回顾一下,了解为什么这很重要。

DOM 输入事件是低级别输入事件之上的抽象,与物理设备输入(例如click 事件可由鼠标、触摸屏或键盘触发)。不过,存在一个问题:没有简单的方法可以获取导致事件的实体设备的详细信息。

此外,出于兼容性原因,某些类型的输入可能会生成更多“虚假”DOM 输入事件。当用户点按触摸屏(例如手机上)时,就会发生这样一种虚假的 DOM 事件;该事件不仅会触发触摸事件,出于兼容性方面的原因,还会触发鼠标事件。

这会给开发者在同时支持鼠标和触摸输入时带来问题。我们很难判断 mousedown 事件实际表示的是来自鼠标的新输入,还是只是之前处理的 touchstart 事件的兼容性事件。

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

问题是:它应该用于何处?

除了指针事件之外,如今的许多开发者还会处理触摸层中的交互逻辑,从而阻止“默认”从一开始就避免创建“虚假”鼠标事件。这种设计适用于许多场景,并且无需进行更改即可利用 InputDeviceCapabilities。

但在某些情况下,您确实不希望阻止触摸事件发生默认;例如,您仍然希望点按发送“点击”事件并更改焦点。对于这些情况,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。将来,预计会进行扩展,以便您详细了解用户系统上的所有输入设备。我们期待收到您对用例的反馈。