如何防止使用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

还有一个解决方案:

$('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 3

我发现大多数解决方案都不适用于标签或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 4

我的解决方案: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 5

在我的情况下,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 6

只需将此方法放入您的表单中，它就会一次性处理双击或多次点击。一旦请求发送，它将不允许一次又一次地发送请求。

<script type="text/javascript">
    $(document).ready(function(){
            $("form").submit(function() {
                $(this).submit(function() {
                    return false;
                });
                return true;
            }); 
    }); 
</script>

它肯定会帮助你。

Answer 7

“十分简单”

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