I have an interesting situation - I have a table row which, currently, shows it's hidden counterpart when I click the Expand button. The original (unhidden) row which contains the expand button also has some content in a certain cell which, when clicked, becomes editable. I would like to be rid of the expand button, and enable expanding of the row via doubleclick anywhere in the row itself, including the field that turns editable when you click it. You can smell the trouble here already.

When I double click a row, two click events are fired first, before the dblclick occurs. This means if I double click the field, it will turn into an editable one, and the row will expand. I would like to prevent this. I want the doubleclick to prevent the firing of the single click, and the single click to perform as usual.

Using event.stopPropagation() clearly won't work since they're two different events.

Any ideas?

Edit (some semi-pseudo code):

Original version:

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

Desired version:

<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