JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="log">
</div>

CSS

table { border: 1px solid red; }
td { border: 1px solid black; }
div.editable { width: 400px; }

JavaScript

function log(msg){
    $('<div/>').text(msg).appendTo('#log');
}

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

$('.editable').dblclick(function(e) {
    window.clearTimeout(window.openMenuTimeout);
    log('editable dblclick');
});