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?

Maybe [this](http://stackoverflow.com/questions/5471291/javascript-with-jquery-click-and-double-click-on-same-element-different-effect) can help you. — Eich, Apr 10 '13 at 14:37

David Hedlund · Answer 1 · 2013-04-10T14:48:32.067

0

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.

edited Apr 10 '13 at 14:48

answered Apr 10 '13 at 14:43

David Hedlund

128,221
31
203
222

Thanks! I like this concept a lot. But i'm not sure how to integrate the second part of it with the editable call. It uses the '.editable' command (where click or dblclick go) after the element, thus intercepting the click event, and firing before any timeouts/etc happen. Any insight to that? – BReal14 Apr 11 '13 at 15:59
@briansol: Ah, are the event listeners for the editable registered by a plugin? Well I'm sure that plugin offers some callbacks for hooking in own code. All you need to make sure is that the clearTimeout call is made when an editable event occurs, so that the menu opener won't kick in. – David Hedlund Apr 11 '13 at 22:30
I've decided to try a different approach and use an external anchor to drive the jEditable stuff. too compliated and unreliable in ie8 (required). – BReal14 Apr 12 '13 at 19:35

jQuery - single vs double clicks - jEditable

1 Answers1