jquery：如何禁用dblclick事件？ [英] jquery: how to disable dblclick events?

问题描述

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

premise: developing a graphic scatterplot (with flotchart.org) I have a js function that dynamically create a that show a image (button) to realize a user action CLICKING on the button ("pan Left" on the example code here below)

问题：
当用户点击快速按钮，触发一个（不期望的）双击事件。
当鼠标悬停在按钮上时，如何禁用双击（所以只允许单击事件）？换句话说：在下面的代码中使用unbind或dblclick会出现什么错误？

problem: when the user click fast over the button, an (undesired) double click event is triggered. How can I disable double click when mouse is over the button (so allowing only single click event) ? In other words: What wrong using unbind or dblclick inthe code here below ?

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'
        });
    });
}

非常感谢
giorgio

many thanks giorgio

推荐答案

解除绑定删除所有事件处理程序，但不会阻止触发事件。

unbind removes all event handlers, it does not prevent the event from being triggered. What you need to do is attach an event handler that stops the event's propagation:

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

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

I might have misunderstood your question. In the event that you want to prevent the second click of the double click from firing the click handler, you can do something like this:

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

这可防止另一次点击事件发生，直到500毫秒过期。

Which prevents another click event from taking place until 500 milliseconds have elapsed.

演示

这篇关于jquery：如何禁用dblclick事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！