Question

我正在努力寻找构建以下内容的“正确”方法。

我有一个标题，其中有一个标题，（在较大的表格中）。这个td有一个点击事件来打开一个子菜单。我在这个标题上使用jEditable实现了内联编辑，包含在div类中。

简化为：

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

我将div设置为在DblClick上对jEditable进行分解。

由于此div接管整个单元格，因此菜单开启单击事件永远不会触发。

如果我将div更改为显示：inline，我可以获取单元格的“余数”以获取菜单开启触发器。

但是，当我双击时，我不想打开菜单，因为这不是用户现在打算做的......他们想要更新标题。

那么，做到这一点的“最佳”方式是什么......不一定是代码方面，而是人为因素。延迟跟踪器是一个想法吗？更改菜单以在双击时触发并在单个上进行编辑，但之后只会向后调整相同的问题.....

思想？

Answer 1

无论标题的大小如何，事件总是会冒出来。当您的标题双击侦听器触发时，菜单开启器的单击侦听器将始终首先触发两次。 Demo

如果点击目标是您的标题，则您需要将菜单开启器限制为双击的阈值。

$('.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

在后一个示例中，您可能确实想要制作可编辑的inline-block，以便利用菜单开启工具仅在可能被证明是双击的点击实际上是在.editable。

jQuery - 单击vs双击 - jEditable

1 个答案: