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>

Ура