javascript - jQuery one() 関数でのクリック ジャンプを防止する

Question

複数のクリックを防ぐために、jQuery でone()関数を使用しています。ただし、もう一度要素をクリックすると、煩わしいクリック ジャンプが発生し、ページの上部に戻ります。

これを防ぐ方法はありますか？クリックのバインドを解除し、関数が完了したときに再度バインドしても同じ結果になります (one()とにかく、イベントのバインドを解除するだけだと思います)。

この出来事の簡単な例: http://jsfiddle.net/iwasrobbed/FtbZa/

Answer 1

これが良いかどうかはわかりませんが、を維持する単純な関数をバインドできますreturn false。

jQueryは、これに対するショートカットを。で提供し.bind('click',false)ます。

$('.someLink').one('click', function() {
    $(this).bind('click',false);
    return false;
});

または、これらのリンクがいくつかある場合、非常に効率的な代替手段は、delegate()^[docs]メソッドを使用して、ハンドラーを共通の祖先にバインドし、それを処理するreturn false;ことです。

ここでは、を使用しましbodyたが、より近い祖先を使用することもできます。

$('.someLink').one('click', function() {
});

$('body').delegate('.someLink','click',function(){return false;});

Answer 2

「#」が使用されないように href を変更してみてください: http://jsfiddle.net/FtbZa/1/

$('.someLink').one('click', function() {
    alert('test');
    return false;
}).attr('href', 'javascript:void(0);');

Answer 3

標準.click()関数と小さなロジックを使用できます。

1. $('.someLink').click(function(event) {
2.     event.preventDefault();
3.     if (!$(this).hasClass("clicked"))
4.         alert('This will be displayed only once.');
5.         $(this).addClass("clicked");
   });

1. クラスsomeLinkで何かを聞いて.click()
2. ブラウザが通常どおりに動作するのを停止します。
3. オブジェクトにクラスがあるかどうかを確認しますclicked （これは任意の名前である可能性があることに注意してください） 。
4. そんなことはしていません。
5. クラスを追加して、clicked次にクリックしたときにコードが無視されるようにします。

こちらのデモをご覧ください

Answer 4

問題は、リスナーがバインド解除された後、ブラウザーがリンク (アンカー タグとして扱っている) を受け入れてそこに行こうとするのを止めるものがないことです。(この場合、単純にページの上部に移動します。