javascript - jquery:如何禁用 dblclick 事件？

Question

前提:开发图形散点图(使用 flotchart.org)我有一个 js 函数，它动态创建一个显示图像(按钮)以实现用户点击按钮的操作(下面示例代码中的“向左平移”)

问题:当用户快速单击按钮时，将触发(不需要的)双击事件。当鼠标悬停在按钮上时如何禁用双击(因此只允许单击事件)？换句话说:在下面的代码中使用 unbind 或 dblclick 有什么问题？

function addButtonPanLeft(x, top, offset) {
    $('<img id="buttonPanLeft" class="navigationbutton" src="../images/pan-left.png" style="left:' + x + 'px;top:' + top + 'px"' + ' title="Pan Left">').appendTo(placeholder).click(function(e) {
        e.preventDefault();
        panleft();
    });

    // disabilito double click sul bottone
    $('#buttonPanLeft').unbind('dblclick');
}


function addButtonPanRight(x, top, offset) {
    $('<img id="buttonPanRight" class="navigationbutton" src="../images/pan-right.png" style="left:' + x + 'px;top:' + top + 'px"' + ' title="Pan Right">').appendTo(placeholder).click(function(e) {
        e.preventDefault();
        panright();
    });

    // disabilito double click sul bottone  NON FUNZIONA ??????
    $('#buttonPanRight').dblclick(function(e) {
        e.preventDefault();
        panright();
        log({
            text: "double click",
            type: 'debug'
        });
    });
}

非常感谢乔吉奥

Answer 1

编辑:作为@Accountant م在评论中提到，unbind现在已弃用。使用类似的 off相反。

unbind 删除所有事件处理程序，它不会阻止事件被触发。您需要做的是附加一个停止事件传播的事件处理程序:

$('#buttonPanLeft').unbind('dblclick');
$('#buttonPanLeft').dblclick(function(e){
    e.stopPropagation();
    e.preventDefault();
    return false;
});

编辑:我可能误解了你的问题。如果您想阻止双击的第二次点击触发 click 处理程序，您可以这样做:

function handler(e){
    e.preventDefault();
    panleft();
    $(this).unbind('click');
    setTimeout(function(){$('#buttonPanLeft').click(handler)}, 500)
}
$('#buttonPanLeft').click(handler);

这会阻止在 500 毫秒过去之前发生另一个点击事件。

DEMO