如何防止双击使用jQuery？(How to prevent a double-click usin

我有一个按钮，例如：

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

在jQuery的我使用的是下面，但它仍然允许双击：

<script type="text/javascript">

$(document).ready(function () {

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

我如何能防止任何想法双击？

Answer 1:

jQuery的一个（）将触发附加事件处理程序一次结合的每种元素，然后删除该事件处理程序。

如果由于某种原因不符合要求，我们也可以禁用已被点击后完全它的按钮。

$(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的元素工作（例如使用剑道控件时）。 所以我做了这个简单的解决方案：

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:

我有类似的问题。 您可以使用的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 8:

“十分简单”

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

Answer 9:

/*
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 10:

我发现了什么是旧的，但在现代浏览器的工作方案。 适用于在双击不切换类。

$('*').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 11:

这是我第一次发布＆我很没有经验，所以请去容易在我身上，但我觉得我有可能会有所帮助的人作出有效的贡献...

有时你需要重复点击之间有非常大的时间窗口（比如一个mailto链接，它需要几秒钟的电子邮件应用程序打开，你不希望它重新触发），但你不希望减缓用户放在其他地方。 我的解决办法是使用根据事件类型的链接类的名字，而在其他地方保留双击功能...

var controlspeed = 0;

$(document).on('click','a',function (event) {
    eventtype = this.className;
    controlspeed ++;
    if (eventtype == "eg-class01") {
        speedlimit = 3000;
    } else if (eventtype == "eg-class02") { 
        speedlimit = 500; 
    } else { 
        speedlimit = 0; 
    } 
    setTimeout(function() {
        controlspeed = 0;
    },speedlimit);
    if (controlspeed > 1) {
        event.preventDefault();
        return;
    } else {

        (usual onclick code goes here)

    }
});

Answer 12:

我有一个类似的问题，但禁用按钮并没有完全奏效了。 有报道说，发生在单击该按钮时，有时一些其他操作，按钮没有被禁用很快，当用户双击，2场比赛时被解雇。
我把判归的超时理念，并结合两种技术，禁用按钮，includeding超时，以防万一。 我创建了一个简单的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 13:

通过@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 14:

如果你真正想要的是避免多个表单提交，而不仅仅是防止双击，使用一个按钮的点击事件jQuery的一个（）可能会有问题，如果有客户端验证（如按要求的文本字段标识）。 这是因为点击触发客户端验证，如果验证失败，无法再次使用该按钮。 为了避免这种情况，一个（）仍然可以直接在表单提交事件时使用。 这是基于jQuery的最干净的解决方案，我发现为：

<script type="text/javascript">
$("#my-signup-form").one("submit", function() {
    // Just disable the button.
    // There will be only one form submission.
    $("#my-signup-btn").prop("disabled", true);
});
</script>

文章来源: How to prevent a double-click using jQuery?