检测是否可以调用 navigator.vibrate

Question

我最近注意到 Chrome 中的一个错误弹出窗口告诉 navigator.vibrate 只能在用户与页面交互后调用：

我可以更改我的页面以请求用户交互（例如使用按钮），但我宁愿保持我的页面不变。但是我需要知道我是否可以调用 navigator.vibrate。

我的第一个方法是在第一个 touchstart 事件之后将布尔值设置为 true：

let canVibrate = false;
document.addEventListener("touchstart", () => {
    if (canVibrate) {
        navigator.vibrate(200);
    } else {
        canVibrate = true;
    }
});

当用户用一根手指触摸时，第一种方法有效，因此可能是大多数情况。

但是，如果用户在拉动它的手指之前放下另一个手指，这将不起作用。在这种情况下，在移除所有手指之前完成的每次触摸都会弹出错误。然后，它还需要再触摸一次，好像所有这些都不算交互。

是否有任何 javascript 函数可以让我知道是否可以调用 navigator.vibrate？如果不是，有什么方法可以测试它？

Answer 1

根据MDN page for touch events 上的示例

这会调用 event.preventDefault() 来阻止浏览器继续处理触摸事件（这也阻止了鼠标事件也被传递）。然后我们获取上下文并将更改的触摸点列表从事件的 TouchEvent.changedTouches 属性中提取出来。

举个例子，你可以这样做：

let canVibrate = false;
document.addEventListener("touchstart", (event) => {
    if (!canVibrate) {
        canVibrate = true
    }
    navigator.vibrate(200);
});