Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript with jQuery: Click and double click on same element, different effect, one disables the other

I have an interesting situation - I have a table row which, currently, shows it's hidden counterpart when I click the "Expand" button. The original (unhidden) row which contains the expand button also has some content in a certain cell which, when clicked, becomes editable. I would like to be rid of the expand button, and enable expanding of the row via doubleclick anywhere in the row itself, including the field that turns editable when you click it. You can smell the trouble here already.

When I double click a row, two click events are fired first, before the dblclick occurs. This means if I double click the field, it will turn into an editable one, and the row will expand. I would like to prevent this. I want the doubleclick to prevent the firing of the single click, and the single click to perform as usual.

Using event.stopPropagation() clearly won't work since they're two different events.

Any ideas?

Edit (some semi-pseudo code):

Original version:

<table>     <tbody>         <tr>             <td><a href="javascript:$('#row_to_expand').toggle();" title="Expand the hidden row">Expand Row</a></td>             <td>Some kind of random data</td>             <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[0]->value("First editable value") ?></td>             <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[1]->value("Second editable value") ?></td>             <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[2]->value("Third editable value") ?></td>             <!-- ... -->             <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[n]->value("Nth editable value") ?></td>         </tr>         <tr style="display: none" id="row_to_expand">             <td colspan="n">Some hidden data</td>         </tr>     </tbody> </table> 

Desired version:

<table>     <tbody>         <tr ondblclick="$('#row_to_expand').toggle()">             <td>Some kind of random data</td>             <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[0]->value("First editable value") ?></td>             <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[1]->value("Second editable value") ?></td>             <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[2]->value("Third editable value") ?></td>             <!-- ... -->             <td><?= $editable_cell_which_turns_into_an_input_field_on_single_click[n]->value("Nth editable value") ?></td>         </tr>         <tr style="display: none" id="row_to_expand">             <td colspan="n">Some hidden data</td>         </tr>     </tbody> </table> 

Cheers

like image 509
Swader Avatar asked Mar 29 '11 10:03

Swader


People also ask

How do you stop a single click event when double clicking?

on('click',function(e){ if(e. originalEvent. detail > 1){ return; /* if you are returning a value from this function then return false or cancel the event some other way */ } }); Done.

Which event triggers when user double-click the element?

The ondblclick event occurs when the user double-clicks on an element.


2 Answers

The general idea:

  1. Upon the first click, dont call the associated function (say single_click_function()). Rather, set a timer for a certain period of time(say x). If we do not get another click during that time span, go for the single_click_function(). If we do get one, call double_click_function()

  2. Timer will be cleared once the second click is received. It will also be cleared once x milliseconds are lapsed.

BTW, check Paolo's reply out: Need to cancel click/mouseup events when double-click event detected and of course the entire thread! :-)

Better answer: https://stackoverflow.com/a/7845282/260610

like image 158
UltraInstinct Avatar answered Sep 21 '22 20:09

UltraInstinct


Working demo

$('#alreadyclicked').val('no click'); $('td.dblclickable').on('click',function(){     var $button=$(this);     if ($button.data('alreadyclicked')){         $button.data('alreadyclicked', false); // reset         $('#alreadyclicked').val('no click');          if ($button.data('alreadyclickedTimeout')){             clearTimeout($button.data('alreadyclickedTimeout')); // prevent this from happening         }         // do what needs to happen on double click.          $('#action').val('Was double clicked');     }else{         $button.data('alreadyclicked', true);         $('#alreadyclicked').val('clicked');         var alreadyclickedTimeout=setTimeout(function(){             $button.data('alreadyclicked', false); // reset when it happens             $('#alreadyclicked').val('no click');             $('#action').val('Was single clicked');             // do what needs to happen on single click.              // use $button instead of $(this) because $(this) is              // no longer the element         },300); // <-- dblclick tolerance here         $button.data('alreadyclickedTimeout', alreadyclickedTimeout); // store this id to clear if necessary     }     return false; }); 

obviously use <td class="dblclickable">

like image 22
Popnoodles Avatar answered Sep 21 '22 20:09

Popnoodles