如何防止使用jQuery進行雙擊？

Question

我有一個按鈕，例如：

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

在jQuery的我使用的是下面的，但它仍然允許雙擊：

<script type="text/javascript"> 

$(document).ready(function() { 

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

我如何能防止雙擊任何想法？

Answer 1

jQuery的one()將針對綁定的每個元素觸發附加的事件處理程序，然後刪除事件處理程序。

如果由於某些原因不能滿足要求，也可以在點擊按鈕後完全禁用按鈕。

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

應當注意的是，使用ID submit可引起問題，因爲它覆蓋form.submit功能與該元素的引用。

Answer 2

對我來說，jQuery的人有一定的副作用（以IE8），我結束了使用下列內容：

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

它非常漂亮的作品，看起來簡單。找到它：http://www.jquerybyexample.net/2013/01/disable-mouse-double-click-using-javascript-or-jquery.html

Answer 3

我的解決方案：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; 
}; 

Answer 4

只是多了一個解決方案：

$('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秒前。如果它是錯誤的（小於0.3秒前），只需更新最後一次點擊時間，如果屬實，則執行一些操作。

jsbin

Answer 5

我也有類似的問題，但禁用按鈕並沒有完全奏效了。當點擊按鈕時發生了一些其他的操作，有時候，按鈕沒有被關閉很快，當用戶雙擊時，發生了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); 
}) 

Answer 6

我有類似的問題。你可以使用setTimeout（）來避免雙擊。

//some codes here above after the click then disable it 

//也檢查這裏是否有禁用

//如果有在BTN標籤禁用，那麼 //返回屬性的屬性。把它轉換成js。

$('#btn1').prop("disabled", true); 

setTimeout(function(){ 
    $('#btn1').prop("disabled", false); 
}, 300); 

Answer 7

我發現大多數解決方案都不適用於點擊標籤或DIV元素（例如使用Kendo控件時）。所以我做了這個簡單的解決方案：

function isDoubleClicked(element) { 
    //if already clicked return TRUE to indicate this click is not allowed 
    if (element.data("isclicked")) return true; 

    //mark as clicked for 1 second 
    element.data("isclicked", true); 
    setTimeout(function() { 
     element.removeData("isclicked"); 
    }, 1000); 

    //return FALSE to indicate this click was allowed 
    return false; 
} 

使用它，你必須決定開始一個事件或有不對的地方：

$('#button').on("click", function() { 
    if (isDoubleClicked($(this))) return; 

    ..continue... 
}); 

Answer 8

/* 
Double click behaves as one single click 


"It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable." 

That way we have to check what is the event that is being executed at any sequence. 

    */ 
     var totalClicks = 1; 

$('#elementId').on('click dblclick', function (e) { 

if (e.type == "dblclick") { 
    console.log("e.type1: " + e.type); 
    return; 
} else if (e.type == "click") { 

    if (totalClicks > 1) { 
     console.log("e.type2: " + e.type); 
     totalClicks = 1; 
     return; 
    } else { 
     console.log("e.type3: " + e.type); 
     ++totalClicks; 
    } 

    //execute the code you want to execute 
} 

}); 

Answer 9

由@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(); 
    } 
}); 

Answer 10

只是把這個方法放在你的表格中，然後它會處理一次雙擊或更多的點擊。一旦請求發送它將不允許發送一次又一次的請求。

<script type="text/javascript"> 
     $(document).ready(function(){ 


      $("form").submit(function() { 
        $(this).submit(function() { 
         return false; 
        }); 
        return true; 
       }); 

     }); 
     </script> 

它會幫助你確定。

Answer 11

我發現的是舊的，但現代瀏覽器的工作解決方案。適用於不通過雙擊來切換課程。

$('*').click(function(event) { 
    if(!event.detail || event.detail==1){//activate on first click only to avoid hiding again on double clicks 
     // Toggle classes and do functions here 
     $(this).slideToggle(); 
    } 
}); 

Answer 12

「易peasy」

$(function() { 
    $('.targetClass').dblclick(false); 
});