带有 jQ​​uery 的 Javascript:单击并双击同一元素，效果不同，一个禁用另一个 [英] Javascript with jQuery: Click and double click on same element, different effect, one disables the other

问题描述

我有一个有趣的情况 - 我有一个表格行，当前，当我单击展开"按钮时，该行显示它是隐藏的对应项.包含展开按钮的原始(未隐藏)行在某个单元格中也有一些内容，当单击该内容时，这些内容变得可编辑.我想去掉扩展按钮，并通过双击行本身的任何地方来扩展行，包括单击它时变为可编辑的字段.你已经可以闻到这里的麻烦了.

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.

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

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.

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

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

有什么想法吗?

编辑(一些半伪代码):

Edit (some semi-pseudo code):

原始版本:

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

干杯

推荐答案

总体思路:

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

1. Upon the first click, dont call the associated function (say single_click_function()). Rather, set a timer for a certain period of time(say x). If we do not get another click during that time span, go for the single_click_function(). If we do get one, call double_click_function()

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

Timer will be cleared once the second click is received. It will also be cleared once x milliseconds are lapsed.

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

BTW, check Paolo's reply out: Need to cancel click/mouseup events when double-click event detected and of course the entire thread! :-)

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

这篇关于带有 jQ​​uery 的 Javascript:单击并双击同一元素，效果不同，一个禁用另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！