Javascript 与 jQuery：单击和双击同一元素，不同的效果，一个禁用另一个

我有一个有趣的情况 - 我有一个表行，当前，当我单击“展开”按钮时，它显示它的隐藏对应项。包含展开按钮的原始（未隐藏）行在某个单元格中也有一些内容，单击该单元格后，这些内容将变为可编辑。我想摆脱扩展按钮，并通过双击行本身的任意位置来扩展行，包括单击它时变为可编辑的字段。你已经可以闻到这里的麻烦了。

当我双击一行时，在 dblclick 发生之前，首先会触发两个单击事件。这意味着如果我双击该字段，它将变成可编辑字段，并且该行将展开。我想阻止这种情况发生。我希望双击可以阻止单击的触发，并且单击可以照常执行。

使用 event.stopPropagation() 显然不起作用，因为它们是两个不同的事件。

有任何想法吗？

编辑（一些半伪代码）：

原始版本：

<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>

所需版本：

<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

总体思路：

1. 第一次单击时，不要调用关联的函数（例如 single_click_function()）。相反，设置一个计时器一段时间（比如x）。如果我们在这段时间内没有再次点击，请使用 single_click_function()。如果我们确实得到了一个，请调用 double_click_function()

2. 一旦收到第二次点击，计时器将被清除。一旦 x 毫秒过去，它也会被清除。

顺便说一句，查看 Paolo 的回复：检测到双击事件时需要取消单击/鼠标事件当然还有整个线程！ :-)

更好的答案：https://stackoverflow.com/a/7845282/260610