1

前提：开发图形散点图（使用flotchart.org）我有一个js函数，它动态创建一个显示图像（按钮）以实现用户操作点击按钮（下面的示例代码中的“pan Left”）

问题：当用户快速单击按钮时，会触发（不需要的）双击事件。当鼠标悬停在按钮上时，如何禁用双击（因此只允许单击事件）？换句话说：在下面的代码中使用 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'
        });
    });
}

非常感谢乔治

4

1 回答 1

3

编辑：正如@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 毫秒过去。

演示

于 2012-11-14T10:02:47.460 回答