Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Detect if browser/device supports double click events

I have a table containing multiple rows. Each row is selectable by clicking once on the row. Double clicking the row opens up the datasheet the row represents in the same window.

When using a mobile device, the double click (double tap?) doesn't trigger my double click event, and the mobile browser just zoom instead.

After giving it some thought, I reckon it makes more sense for mobile devices to open the datasheet with a single click/tap anyway.

Right now I'm detecting if it's a mobile device browser, when setting up the event listener for the table, with this code:

if( /Android|webOS|iPhone|iPad/i.test(navigator.userAgent) ) {
    // Single click event bind, open
} else {
    // Single click event bind, select
    // Double click event bind, open
}

Instead of relying on the user agent, I woud much rather do some feature detection, so any device unable to make a double click works.

I tried detecting if the dblclick event is available on my Android device, and it is.
I guess this makes sense, since the browser does support it, but the device just triggers a different event when double tapping.

The only other thing I could come up with is checking if the touchstart etc. events are available, but that seems about as wrong as checking the user agent.

Is there any good way to detect if the browser / client supports double clicks as expected?

like image 212
Wertisdk Avatar asked Jan 16 '13 08:01

Wertisdk


1 Answers

Maybe try to use a timeout to check if there is an another click after the first click

$(Elm).click(function(evnt){
  clicks++;
  if (clicks == 1) {
    setTimeout(function(){
      if(clicks == 1) 
        // Single click event bind, open
       else 
         // Double click event bind, open
    },2000);
});
like image 53
Hodaya Shalom Avatar answered Sep 30 '22 14:09

Hodaya Shalom