65

私はそのようなボタンを持っています:

<input type="submit" id="submit" value="Save" />

jQuery内で私は以下を使用していますが、それでもダブルクリックが可能です:

<script type="text/javascript">

$(document).ready(function () {

    $("#submit").one('click', function (event) {

ダブルクリックを防ぐ方法について何か考えはありますか?

4

16 に答える 16

86

jQuery のone()は、バインドされた要素ごとに 1 回、添付されたイベント ハンドラーを起動してから、イベント ハンドラーを削除します。

何らかの理由で要件を満たさない場合は、クリック後にボタンを完全に無効にすることもできます。

$(document).ready(function () {
     $("#submit").one('click', function (event) {  
           event.preventDefault();
           //do something
           $(this).prop('disabled', true);
     });
});

ID を使用すると、その要素への参照で関数がsubmit上書きされるため、問題が発生する可能性があることに注意してください。form.submit

于 2012-07-23T22:53:48.747 に答える
32

もう1つの解決策：

$('a').on('click', function(e){
    var $link = $(e.target);
    e.preventDefault();
    if(!$link.data('lockedAt') || +new Date() - $link.data('lockedAt') > 300) {
        doSomething();
    }
    $link.data('lockedAt', +new Date());
});

ここでは、最後のクリックの時刻をデータ属性として保存し、前回のクリックが 0.3 秒以上前かどうかを確認します。false (0.3 秒未満) の場合は、最後のクリック時刻を更新するだけで、true の場合は何かを行います。

jsbin

于 2015-02-17T16:25:39.697 に答える
12

私の解決策: https://gist.github.com/pangui/86b5e0610b53ddf28f94ダブルクリックを防ぎますが、1 秒後にさらにクリックを受け入れます。それが役に立てば幸い。

コードは次のとおりです。

jQuery.fn.preventDoubleClick = function() {
  $(this).on('click', function(e){
    var $el = $(this);
    if($el.data('clicked')){
      // Previously clicked, stop actions
      e.preventDefault();
      e.stopPropagation();
    }else{
      // Mark to ignore next click
      $el.data('clicked', true);
      // Unmark after 1 second
      window.setTimeout(function(){
        $el.removeData('clicked');
      }, 1000)
    }
  });
  return this;
};
于 2015-01-28T22:18:15.203 に答える
11

私の場合、jQuery one には (IE8 で) いくつかの副作用があり、最終的には次のものを使用しました。

$(document).ready(function(){
  $("*").dblclick(function(e){
    e.preventDefault();
  });
});

これは非常にうまく機能し、よりシンプルに見えます。そこにありました：http://www.jquerybyexample.net/2013/01/disable-mouse-double-click-using-javascript-or-jquery.html

于 2014-04-02T01:40:42.173 に答える
1

@Kichrum によって提供されたソリューションは、ほとんどうまくいきました。デフォルトのアクションを防ぐために、 e.stopImmediatePropagation() も追加する必要がありました。これが私のコードです：

$('a, button').on('click', function (e) {
    var $link = $(e.target);
    if (!$link.data('lockedAt')) {
        $link.data('lockedAt', +new Date());
    } else if (+new Date() - $link.data('lockedAt') > 500) {
        $link.data('lockedAt', +new Date());
    } else {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
    }
});
于 2017-06-22T08:22:39.243 に答える
0

同様の問題がありましたが、ボタンを無効にしてもうまくいきませんでした。ボタンがクリックされたときに発生した他のアクションがいくつかあり、ボタンがすぐに無効にならなかったり、ユーザーがダブルクリックしたときに 2 つのイベントが発生したりしました。
Pangui のタイムアウトのアイデアを採用し、両方の手法を組み合わせて、ボタンを無効にし、念のためタイムアウトを含めました。そして、単純な jQuery プラグインを作成しました。

var SINGLECLICK_CLICKED = 'singleClickClicked';
$.fn.singleClick = function () {
    var fncHandler; 
    var eventData;
    var fncSingleClick = function (ev) {
        var $this = $(this);
        if (($this.data(SINGLECLICK_CLICKED)) || ($this.prop('disabled'))) {
            ev.preventDefault();
            ev.stopPropagation();
        }
        else {
            $this.data(SINGLECLICK_CLICKED, true);
            window.setTimeout(function () {
                $this.removeData(SINGLECLICK_CLICKED);
            }, 1500);
            if ($.isFunction(fncHandler)) {
                fncHandler.apply(this, arguments);
            }
        }
    }

    switch (arguments.length) {
        case 0:
            return this.click();
        case 1:
            fncHandler = arguments[0];
            this.click(fncSingleClick);
            break;
        case 2: 
            eventData = arguments[0];
            fncHandler = arguments[1];
            this.click(eventData, fncSingleClick);
            break;
    }
    return this;
}

そして、次のように使用します。

$("#button1").singleClick(function () {
   $(this).prop('disabled', true);
   //...
   $(this).prop('disabled', false);
})
于 2015-02-26T15:00:37.863 に答える