Can I request / determine the double click speed for a webpage user?

Question

It depends on the OS / user. Not a browser, not a website, but the OS decides how quickly and slowly there should be a double click.

I would like to use this number in my application. Is there any way to get this number using JS?

Simple question. Perhaps this is not possible.

thanks

Answer 1

The simple answer is no, sorry.

The best thing you could do would be something like this (the example uses jQuery just because it was faster to write, the principle holds if jQuery is not available. Also note that this can be simplified, this is what used to come to the head ):

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; }); 

Unfortunately, this is probably not very useful. You can record the dblClickTime values ​​and check the longest, but it is still very unlikely to be the actual value you are using. Such things are simply unavailable using JavaScript.

Answer 2

I would like to use this number in my application. Is there any way to get this number using JS?

Definitely not - such things are outside the scope of JavaScript.

You can find out the values ​​that work for double-clicking by asking the user to double-click, listen to the click events and see if the dblclick event is fired - I'm not sure if the event handling works that way. But even if it works, it is still far from the actual determination of actual cost.

Answer 3

Adding the answer to James Allardis:

Depending on your implementation and where you are looking for double clicks, you can also check the location of the user's mouse (or, I think, the location of the point). This is to avoid double-clicking when the user clicks things on different parts of your page (again, it depends on the implementation of your event listener - if this is only one button, for example, this is probably not a problem).

When the click event fires an event listener in my example below, there are two variables e.clientX and e.clientY . This will give you the location of the mouse. You might want to check if the user has changed since the first mouse click (adapt according to your code).

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

You do not want it to be too dense, or the user will never be able to double-click, and you do not want it to be too free, so double clicks seem random to the user. Maybe start with 25px or so around the first click (again, it depends on your application). This is something you can test and customize based on your user interface.

I assume that you do not have jQuery or you are not using it, because I believe that jQuery may already perform this calculation to start dblclick

Answer 4

How about marking the time for the last two clicks on a page and then counting the difference between them when double-clicking?

 const clicks = [0, 0]; let count = 0; document.body.addEventListener('click', () => { clicks[count] = new Date(); count = +!count; }, true); $('#example').dblclick(function() { console.log(Math.abs(clicks[0] - clicks[1]) + ' ms') }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="example">Clickme</button> 

JSFiddle DEMO

Answer 5

Why can't you just start the timer when registering a click event and stop the timer on the second click?

Answer 6

This is my decision of 2015, I would like to see a clean version of js tho.

 var start; var click = null; $(document).click(function() { var now = performance.now(); start = click ? click : now; click = now; }).dblclick(function() { alert(performance.now()-start) }); 

EDIT

Pure 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)); }); }