8

.click() イベントで div を右または左に移動する単純な jQuery アニメーションがあります。

ただし、ユーザーがイベントを 2 回クリックすると、イベントが 2 回発生し、フォーマットが乱れます。

これが私が持っているものの例です：

$('a#right').click( function () {

if ($(this).is(':visible')) {

    $('#slide').animate({right: '+=257'}, 400, function () {
    slide_button();
    });

    }
});

関数 slide_button() は、div の位置がユーザーの視点の許容範囲内にあるかどうかを確認します。その場合、右または左のボタンが表示されるようになります。範囲外の場合は、ボタンを非表示にします。

うまく機能しますが、2 回クリックすると、ページからすぐにスライドします。

ダブルクリックを無視するためにこれを操作する方法はありますか?

4

4 に答える 4

15

要素がすでにアニメーション化されているかどうかを確認するだけです:

$('a#right').click( function () {
    if ($(this).is(':visible') && !$('#slide').is(':animated')) {
        $('#slide').animate({right: '+=257'}, 400, function () {
            slide_button();
        });
    }
});
于 2010-09-09T06:33:01.793 に答える
7

jquery でone()を使用できます。

$('a#right').one("click", function () {
    slide($(this));
});

function slide(obj) {
    if (obj.is(':visible')) {
        $('#slide').animate({right: '+=257'}, 400, function () {
            slide_button();
            $('a#right').one("click", function () {
              slide($(this));
            }
        });
}

アニメーションが完了すると、クリック イベントは再びリンクにバインドされ、最大 1 回しか実行できなくなります。

于 2010-09-09T06:46:24.583 に答える
1

私は通常、グローバル変数を設定して if like を実行することでこれを回避します

 clicked = true;
 $(div).click(function(){
   if (!clicked){
       clicked = true;
       Your function with a callback setting clicked to false
   }
   ....
 })
于 2010-09-09T06:34:20.247 に答える
0

クリックイベントを.unbind()一度クリックすると、複数回実行されなくなります。

$('a#right').click(function () {
    $(this).unbind('click');
    ...
});

アニメーションが完了したら、もう一度クリックできるようにする必要がある場合は、アニメーションを再バインドできます。

于 2010-09-09T06:25:28.617 に答える