javascript - 为什么 'ontouchstart' 在窗口 "supported by most browsers"中？

Question

我正在重构别人写的一些代码。有一个函数使用:

!!('ontouchstart' in window)

我在其他项目中看到过这个:https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js#L40在 Stackoverflow 的回答中:https://stackoverflow.com/a/4819886/1127635

但它似乎比替代方案慢:http://jsperf.com/hasownproperty-vs-in-vs-undefined/12

那么为什么要使用这个可能更慢的替代方案呢？哪些浏览器不支持其他解决方案？

Answer 1

您的两个替代测试在某些方面都有缺陷:

• window.ontouchstart !== null 测试非null 监听器。测试 ontouchstart 的值是一种有风险的方法，因为库或其他代码可能会更改 ontouchstart 的值。测试值(value)是一种糟糕的方法；测试属性本身的存在会好得多，这将我们带到您提议的下一个测试...

• window.hasOwnProperty('ontouchstart') 测试 window 对象是否有自己的 ontouchstart 属性。在某些浏览器中(我刚刚在 Chrome 37 和 IE9 上确认了这一点)，window 没有有自己的 on 事件属性；相反，它们是 window.__proto__ 的属性。

我们不应该测试一个值(因为之前的代码可能在我们运行我们的代码之前改变了值)并且我们不能测试 window 自己的属性，因为浏览器不同他们对 window 原型(prototype)链中存在的事件监听器属性的实现。因此，我们最一致的选择是测试该属性是否存在于 window 的原型(prototype)链中的任何位置(无论值如何)。这正是我们使用 in 运算符所做的。

当然，如果其他人的代码在我们的测试之前运行，他们可以在原本没有的地方添加一个 ontouchstart 属性。绝对严格地测试对事件的支持是不可能的，这是一件糟糕的事情。