使用jQuery的Javascript:单击并双击相同的元素,不同的效果,一个禁用另一个

Question

我有一个有趣的情况 - 我有一个表行,当前,当我点击"展开"按钮时,它显示它是隐藏的对应物.包含展开按钮的原始(未隐藏)行也包含某个单元格中的某些内容,单击该单元格后,该内容将变为可编辑状态.我想摆脱展开按钮,并通过双击行本身的任何位置来启用行的扩展,包括单击它时变为可编辑的字段.你可以在这里闻到麻烦.

当我双击一行时,在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>

干杯

Answer 1

总体思路:

1. 第一次单击时,不要调用相关的函数(比如single_click_function()).而是将计时器设置为特定时间段(比如x).如果我们在该时间段内没有再次点击,请转到single_click_function().如果我们得到一个,请调用double_click_function()

2. 收到第二次点击后,计时器将被清除.一旦经过x毫秒,它也将被清除.

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

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

Answer 2

工作演示

$('#alreadyclicked').val('no click');
$('td.dblclickable').on('click',function(){
    var $button=$(this);
    if ($button.data('alreadyclicked')){
        $button.data('alreadyclicked', false); // reset
        $('#alreadyclicked').val('no click');

        if ($button.data('alreadyclickedTimeout')){
            clearTimeout($button.data('alreadyclickedTimeout')); // prevent this from happening
        }
        // do what needs to happen on double click. 
        $('#action').val('Was double clicked');
    }else{
        $button.data('alreadyclicked', true);
        $('#alreadyclicked').val('clicked');
        var alreadyclickedTimeout=setTimeout(function(){
            $button.data('alreadyclicked', false); // reset when it happens
            $('#alreadyclicked').val('no click');
            $('#action').val('Was single clicked');
            // do what needs to happen on single click. 
            // use $button instead of $(this) because $(this) is 
            // no longer the element
        },300); // <-- dblclick tolerance here
        $button.data('alreadyclickedTimeout', alreadyclickedTimeout); // store this id to clear if necessary
    }
    return false;
});

显然使用 <td class="dblclickable">