Javascript与jQuery：点击并双击相同的元素，效果不同，一个禁用另一个 [英] Javascript with jQuery: Click and double click on same element, different effect, one disables the other

问题描述

我有一个有趣的情况 - 我有一个表格行，目前，当我点击展开按钮时，它显示它是隐藏的对应。包含展开按钮的原始（未隐藏）行也在某个单元格中具有一些内容，当单击时，该行可变为可编辑。我想摆脱扩展按钮，并通过doubleclick在行本身的任何位置启用该行的扩展，包括单击它时可编辑的字段。你可以在这里闻到这里的麻烦。

当我双击一行时，两次点击事件首先被触发，然后才会出现dblclick。这意味着如果我双击该字段，它将变为可编辑的字段，该行将展开。我想防止这个。我想要双击以防止点击单击，单击可以像往常一样执行。

使用event.stopPropagation（）显然不会工作，因为他们两个不同的事件。

任何想法？

编辑（一些半伪代码） p>

原始版本：

 < table> 
< tbody> 
< tr> 
< td>< a href =javascript：$（'＃row_to_expand'）。toggle（）; title =展开隐藏的行>展开Row< / a>< / td> 
< td>某种随机数据< / td> 
< td><？= $ editable_cell_which_turns_into_an_input_field_on_single_click [0]  - > value（第一可编辑值）？>< / td> 
< td><？= $ editable_cell_which_turns_into_an_input_field_on_single_click [1]  - > value（第二可编辑值）？>< / td> 
< td><？= $ editable_cell_which_turns_into_an_input_field_on_single_click [2]  - > value（第三可编辑值）？>< / td> 
<！ -  ...  - > 
< td><？= $ editable_cell_which_turns_into_an_input_field_on_single_click [n]  - > value（第N个可编辑值）？>< / td> 
< / tr> 
< tr style =display：noneid =row_to_expand> 
< td colspan =n>一些隐藏数据< / td> 
< / tr> 
< / tbody> 
< / table> 
  

所需版本：

 <表> 
< tbody> 
< tr ondblclick =$（'＃row_to_expand'）。toggle（）> 
< td>某种随机数据< / td> 
< td><？= $ editable_cell_which_turns_into_an_input_field_on_single_click [0]  - > value（第一可编辑值）？>< / td> 
< td><？= $ editable_cell_which_turns_into_an_input_field_on_single_click [1]  - > value（第二可编辑值）？>< / td> 
< td><？= $ editable_cell_which_turns_into_an_input_field_on_single_click [2]  - > value（第三可编辑值）？>< / td> 
<！ -  ...  - > 
< td><？= $ editable_cell_which_turns_into_an_input_field_on_single_click [n]  - > value（第N个可编辑值）？>< / td> 
< / tr> 
< tr style =display：noneid =row_to_expand> 
< td colspan =n>一些隐藏数据< / td> 
< / tr> 
< / tbody> 
< / table> 
  

干杯

解决方案

一般想法：

1. 首次点击后，不要调用相关函数（例如single_click_function（）） 。而是在一段时间内设定一个计时器（例如x）。如果我们在该时间段内没有得到另一个点击，请转到single_click_function（）。如果我们得到一个，请拨打double_click_function（）




2. 一旦接收到第二次点击，计时器将被清除。

BTW，检查Paolo的回复：双击时需要取消点击/ mouseup事件事件检测到$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ ： - ）

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

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

解决方案

The general idea:

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

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

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

Better answer: https://stackoverflow.com/a/7845282/260610

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