javascript - jquery: how to disable dblclick events? - Stack Overflow

admin管理员组

文章数量:1334132

premise: developing a graphic scatterplot (with flotchart) 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)

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

many thanks giorgio

premise: developing a graphic scatterplot (with flotchart) 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)

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

many thanks giorgio

• javascript
• jquery
• click
• double-click

Share Improve this question Follow edited Nov 14, 2012 at 10:04 user1726343 asked Nov 14, 2012 at 10:00 Giorgio RobinoGiorgio Robino 2,27377 gold badges4242 silver badges6565 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

EDIT: As @Accountant م has mentioned in the ments, unbind is now deprecated. Use the similar off instead.

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

EDIT: 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);

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

DEMO

本文标签： javascriptjquery how to disable dblclick eventsStack Overflow