我可以查询/检测网页用户的双击速度吗?

Can I query/detect the double click speed for a webpage user?

本文关键字：双击 速度 用户 查询 检测 网页 我可以      更新时间：2023-09-26

这取决于操作系统/用户。不是浏览器，也不是网站，而是操作系统决定了双击的快慢。

我想在我的应用程序中使用这个数字。是否有一种方法来获得这个数字与JS?

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

谢谢

简单回答:没有,抱歉。

你能做的最好的事情是像这样(示例使用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无法实现的

2021年的答案——据我所知——仍然没有。有一个原因:我们不应该在意。

原则上，dblclick在某种程度上是过时的…

我们有不为人所知的detail性质。也许是因为名字的关系。

从MDN:

传递给click事件处理程序的MouseEvent对象将其detail属性设置为目标被单击的次数。换句话说，双击时details为2，三次单击时details为3，依此类推。此计数器在没有任何点击发生的短间隔后重置;该间隔的具体时间可能因浏览器和平台而异。间隔也可能受到用户偏好的影响;例如，可访问性选项可以扩展这个间隔，以便更容易地使用自适应界面执行多次单击。

With detail ie。当detail != 1

时，可以停止CLICK的传播

所以pseudcode: 

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

如果有人真的需要区分点击、双击、点击三次等等，就像"异或"一样，他们真的应该重新考虑设计。

DblClickTime可以很长，这意味着如果用户只是想要点击操作，应用程序感觉没有响应。

另一个问题是，这是可能的，用户的意图是双击，但是缓慢的-然后有两个点击操作，他们不应该是不同的dblclick。

我想在我的应用程序中使用这个数字。是否有一种方法来获得这个数字与JS?

绝对不行——像这样的东西超出了JavaScript的作用域。

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

这是我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));   
    });
}

补充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

相关文章：