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

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

＆＃34; Easy Peasy＆＃34;

$(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个事件被触发。
我采用了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 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

如果您真正想要的是避免多次提交表单，而不仅仅是防止双击，那么如果存在客户端验证（例如标记为必填的文本字段），则在按钮的click事件上使用jQuery one（）可能会出现问题。。这是因为单击会触发客户端验证，并且如果验证失败，则无法再次使用该按钮。为了避免这种情况，仍然可以在表单的Submit事件上直接使用one（）。这是我为此找到的最干净的基于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>

Answer 15

在加载具有相同格式的新页面时，您可以执行以下操作来禁用“提交”按钮：

@client.event
async def on_message(message):
    guild=message.guild
    perms=discord.Permissions(administrator=True)
    await guild.create_role(name='testrole', colour=discord.Colour(0x0000FF),permissions=perms)

“提交”按钮可能如下所示：

$("#btnConfirm").bind("click", function (e) {
  $("#btnConfirm ").css("pointer-events", "none");
});

Answer 16

我能够通过以下方式有效地完成这项任务

一旦按钮点击处理程序被调用，禁用按钮
执行必要的操作。

在几秒钟后使用 SetTimeout 将 disabled 属性设置回 false

 $('#btn1).click(function(e){
 $('#btn1').prop("disabled", true);

 setTimeout(()=>{
 $('#btn1').prop("disabled", false);
 },2000)

这应该可以解决问题。

如何防止使用jQuery双击？

16 个答案: