1

前提：グラフィックスキャッタプロットの開発（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'
        });
    });
}

どうもありがとうジョルジオ

4

1 に答える 1

3

編集: @Accountant ãがコメントで述べたように、unbind現在は非推奨です。off代わりに同様のものを使用してください。

unbindすべてのイベント ハンドラーを削除しますが、イベントのトリガーは妨げられません。必要なことは、イベントの伝播を停止するイベント ハンドラーをアタッチすることです。

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

編集：あなたの質問を誤解したかもしれません。ダブルクリックの 2 回目のクリックで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 に答える