jQuery - single vs double clicks - jEditable

Question

I'm struggling to find the 'right' way to build the following.

I have a td cell that has a title in it, (in a larger table). This td has a click event to open a sub menu. I have implemented inline editing with jEditable on this title, wrapped in a div class.

simplified:

<tr>  
....
  <td class="menuopener"><div class="editable">TITLE</div></td> 
...
</tr>

I have the div set to triger the jEditable on DblClick.

Since this div takes over the entire cell, the menuopener click event never fires.

If i change the div to display:inline, i can get the 'remainder' of the cell to take the menu opener trigger.

But when i double click, i DONT want the menu to open, as that is not what the user intends to do right now.... they want to update the title.

So, what's the 'best' way to do this... not necessarily code-wise, but human factor-wise. Is a delay tracker an idea? change the menu to trigger on double click and the edit on single, but then its the same problem only backwards.....

Thoughts?

David Hedlund David Hedlund · Accepted Answer · 2013-04-10T14:43:23

Regardless of the size of the header, the event will always bubble up. When your title double-click listener fires, the click listener for the menu opener will always have fired twice first. Demo.

If the click target is your title, you'll need to throttle the menu opener to whatever your threshold for a double-click is.

$('.menuopener').click(function(e) {
    var delay = $(e.target).is('.editable') ? 200 : 0;
    window.clearTimeout(window.openMenuTimeout);
    window.openMenuTimeout = window.setTimeout(function() {
       // your menu opener code
    }, delay);
});

$('.editable').dblclick(function(e) {
    window.clearTimeout(window.openMenuTimeout);
    // your editable code
});

Demo

In this latter example you may indeed want to make your editable inline-block, to utilize the feature that the menu opener is only delayed if the click that may turn out to be a double-click is in fact on the .editable.

jQuery - single vs double clicks - jEditable

1 Answers