能否查询/检测网页用户的双击速度？

Question

它取决于操作系统/用户。不是浏览器，不是网站，而是操作系统决定双击的速度。

我想在我的应用程序中使用该号码。有没有办法用JS获取这个数字？

简单的问题。也许不可能。

谢谢

Answer 1

简单的答案：不，抱歉。

您能做的最好的事情就是这样（示例使用 jQuery 只是因为它编写起来更快，如果 jQuery 不可用，则原则成立。另请注意，这也可能是被简化，这正是首先想到的）：

var timer,
    num = 0;
$("#example").click(function() {
    /*This condition is required because 2 click events are fired for each
    dblclick but we only want to record the time of the first click*/
    if(num % 2 === 0) {
        timer = (new Date()).getTime();
    }
    num++;
}).dblclick(function() {
    var time2 = (new Date()).getTime(),
        dblClickTime = time2 - timer; 
});

不幸的是，这可能不是很有帮助。您也许可以记录 dblClickTime 值并检查最长的值，但这仍然不太可能是您想要的实际值。 JavaScript 无法实现此类功能。

Answer 2

据我所知，2021 年的答案仍然没有。这是有原因的：我们不应该关心。

原则上，dblclick 在某种程度上已经过时了……

我们有一个不太为人所知的detail 属性。也许是因为名字。

来自 MDN：

传递到单击事件处理程序的 MouseEvent 对象将其详细属性设置为目标被单击的次数。换句话说，双击的详细信息将为 2，三次单击的详细信息将为 3，依此类推。在没有任何点击发生的情况下，该计数器会在短时间间隔后重置；该间隔的具体时间可能因浏览器和平台的不同而有所不同。该间隔也可能受到用户偏好的影响；例如，辅助功能选项可能会延长此间隔，以便更轻松地使用自适应界面执行多次点击。

带有 detail 即。 click_count 当detail != 1时，可以停止CLICK的传播

所以伪代码：

if evt.detail==1
    do_click()
if evt.detail==2
    do_dblclick()
...
    
if evt.detail!=1
    evt.stopPropagation()   
    

如果有人真的需要区分单击、双击、三击……就像“XOR”一样，他们应该真正重新考虑设计。

DblClickTime 可能会很长，这意味着如果用户只想单击操作，则应用程序感觉没有响应。

另一个问题是，用户的意图可能是双击，但速度很慢 - 然后有两个单击操作，它们不应该与 dblclick 不同。

Answer 3

我想在我的应用程序中使用该号码。有没有办法用JS获取这个数字？

绝对不是——这样的东西超出了 JavaScript 的范围。

您可以通过要求用户双击来找出适用于双击的值，侦听 click 事件并查看 dblclick 事件 被触发 - 不过，我不确定事件处理是否是这样工作的。但即使这有效，距离真正找出实际价值还有很长的路要走。

Answer 4

这是我 2015 年的解决方案，希望看到一个纯 js 版本。

var start;
var click = null;

$(document).click(function() {
    var now = performance.now();
    start = click ? click : now;
    click = now;

}).dblclick(function() {
    alert(performance.now()-start)
});

编辑

纯JS

var start;
var click = null;

var getStart = function() {
    var now = performance.now();
    start = click ? click : now;
    click = now;
}
var getStop = function() {
    alert(performance.now()-start)
}


if (window.addEventListener) {
    window.addEventListener('click', getStart , false);
} else {
    window.attachEvent('onclick', function() {
        return(getStart.call(window, window.event));   
    });
}
if (window.addEventListener) {
    window.addEventListener('dblclick', getStop , false);
} else {
    window.attachEvent('ondblclick', function() {
        return(getStop.call(window, window.event));   
    });
}

Answer 5

补充 James Allardice 的答案：

根据您的实现以及您正在寻找双击的位置，您可能还需要检查用户的鼠标位置（或者我猜是点击位置）。这是为了避免当用户单击页面不同部分上的内容时双击触发（再次取决于您的事件侦听器实现 - 例如，如果它只是在一个按钮上，这可能不是问题）。

当点击事件触发时，下面示例中的事件侦听器有两个变量 e.clientX 和 e.clientY。这将为您提供鼠标的位置。您可能想要检查用户自第一次单击以来是否显着移动了鼠标（相应地适应您的代码）。

document.addEventListener("click", function(e){ console.log("Mouse X: " + e.clientX + ": Mouse Y: " + e.clientY); });

您不希望它太紧，否则用户可能永远无法双击，并且您不希望它太松，以免用户看似随机地双击。也许从第一次点击周围 25px 左右的框开始（同样这取决于您的应用程序）。您可以根据您的用户界面进行测试和调整。

我假设您没有 jQuery 或没有使用它，因为我相信 jQuery 可能已经执行此计算来触发 dblclick