CODEWITHSUNDEEP
javascripthtmldouble-click
Rudie
Rudie

Reputation: 53881

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

It's OS/user dependant. Not the browser, not the website, but the OS decides how fast and slow a double click must be.

I'd like to use that number in my app. Is there a way to get that number with JS?

Simple question. Might not be possible.

Thanks

Upvotes: 8

Views: 5071

Answers (5)

halfbit
halfbit

Reputation: 3954

Answer 2021 - as far as I know - still not. There is a reason: we should not care.

In principle dblclick is somehow obsolete …

We have the not well known detail property. Maybe because of the name.

From MDN:

The MouseEvent object passed into the event handler for click has its detail property set to the number of times the target was clicked. In other words, detail will be 2 for a double-click, 3 for triple-click, and so forth. This counter resets after a short interval without any clicks occurring; the specifics of how long that interval is may vary from browser to browser and across platforms. The interval is also likely to be affected by user preferences; for example, accessibility options may extend this interval to make it easier to perform multiple clicks with adaptive interfaces.

With detail ie. click_count it is possible to stop propagation of CLICK when detail != 1

So pseudcode:

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

If someone really needs to distinguish between click, double-click, triple-click, … like an 'XOR', they should really rethink the design.

The DblClickTime can be very long, that means the app feels like not responding, if the user just wants the click-action.

The other problem is, that it is possible, that users intention is a double-click, but is to slow - then there are two click-actions, they should not be to different to dblclick.

Upvotes: 3

Tim
Tim

Reputation: 99

Adding on to James Allardice's answer:

Depending on your implementation and where you are looking for double clicks you may want to also check the users mouse location (or I guess tap location). This is to avoid a double click firing when the user is clicking things on different parts of your page (again depends on your event listener implementation -- if it is just on one button for example this probably isn't an issue).

When a click event fires the event listener in my example below has two variables e.clientX and e.clientY. This will give you the location of the mouse. You might want to check to see if the user has moved their mouse significantly since the first click (adapt accordingly to your code).

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

You don't want to have it be too tight or else a user may never be able to fire a double click, and you don't want it to be too loose so that double clicks fire seemingly randomly for the user. Maybe start with a 25px or so box around the first click (again this depends on your application). This is something you can test and adjust based on your user interface.

I am assuming you don't have jQuery or aren't using it, because I believe jQuery might already do this calculation to fire dblclick

Upvotes: 0

TarranJones
TarranJones

Reputation: 4242

This is my 2015 solution, would like to see a pure js version 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));   
    });
}

Upvotes: 0

James Allardice
James Allardice

Reputation: 166031

Simple answer: no, sorry.

The best you could do would be something like this (example uses jQuery simply because it was quicker to write, the principle holds if jQuery is unavailable. Also note that this could well be simplified, this is just what came to mind first):

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, that's probably not very helpful. You may be able to record the dblClickTime values and check for the longest, but that still is very unlikely to be the actual value you're after. That sort of thing is just not available through JavaScript.

Upvotes: 3

Pekka
Pekka

Reputation: 449733

I'd like to use that number in my app. Is there a way to get that number with JS?

Definitely not - stuff like this is outside JavaScript's scope.

You may be able to find out values that work for a double click by asking the user to double-click, listen to the click events and see whether the dblclick event is fired - I'm nnot sure whether event handling works that way, though. But even if that works, it is still a long way from actually finding out the actual value.

Upvotes: 1

Related Questions