InputDeviceCapabilities API - 提供有关输入事件的底层来源的详细信息

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

InputDeviceCapabilities API 提供有关输入事件的底层来源的详细信息。该 API 试图描述设备的行为方式,而不是它是什么。例如,API 的第一个版本指示设备是否触发触摸事件,而不是它是否是触摸屏。

输入设备功能概念和用法

因为 DOM 事件抽象了设备输入,所以它们无法了解触发事件的设备或设备类型。这可能会导致同一操作触发多个事件处理程序的情况。为了解决这个问题,开发人员做出假设并使用启发式方法来规范网页上的行为。

InputDeviceCapabilities API 通过抽象输入设备的功能来解决这个问题。例如,假设我们有一个网页,同时实现了 touchstartmousedown 事件。我们可以假设,如果触发了 touchstart 事件,那么用户的设备就有一个触摸界面。那么当 mousedown 事件被触发的时候呢?了解是否也触发了 touchstart 事件会很有用,这样我们就不会两次采取相同的操作。我们可以通过检查 UIEventsourceCapabilities 属性来做到这一点。

myButton.addEventListener('mousedown', function(e) {
  // 上面处理的触摸事件案例,不要在点击时再次更改样式。
  if (!e.sourceCapabilities.firesTouchEvents)
    myButton.classList.add("pressed");
});

接口

InputDeviceCapabilities

提供有关输入设备的逻辑信息。

规范

规范 状态 备注
InputDeviceCapabilities 草稿 初始定义。

桌面浏览器兼容性

特性ChromeEdgeFirefoxInternet ExplorerOperaSafari
基础支持47≤79 未知 不支持 支持 未知
InputDeviceCapabilities() 构造函数47≤79 未知 不支持 未知 未知
firesTouchEvents47≤79 未知 不支持 支持 未知

移动浏览器兼容性

特性AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基础支持4747 未知 未知 未知 支持 未知
InputDeviceCapabilities() 构造函数4747 未知 未知 未知 未知 未知
firesTouchEvents4747 未知 未知 未知 支持 未知