Question

我注意到我的用户有时会点击按钮两次，也许没有人告诉他们一次点击就足够了。

阻止双击的最佳方法是什么？我基本上隐藏了按钮并显示“加载”gif，但这显然是不够的......

Answer 1

通常禁用/隐藏/替换按钮应该有效。如果它们真的很快，请尝试在脚本启动时将变量设置为false，如果为true则返回，在第一次单击后将其设置为true。

var alReadyClicked = false;
function click(){
 if (alreadyClicked) 
  return false;
 alreadyClicked = true;
}

当用户再次点击时，不要忘记将其设置为false。

Answer 2

如果他们点击足够快以点击双击事件，则返回false。

ondblclick="return false"

编辑：这不会取消单击事件，因此问题仍然存在。

Answer 3

我刚刚发现了jQuery函数.one（），这对于这种目的非常有用！太棒了！

Answer 4

JQuery .one()的等效项可能是once上的AddEventListner选项，例如：

function doSubmit () { /* your code */ }
btn = document.getElementById ('foo');
btn.addEventListener ('click', doSubmit, {once: true});

参考：javascript - JS equivalent for jQuery one() - Stack Overflow

Answer 5

使用标志的另一个例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>test dbl click</title>
    </head>
    <body>
        <button id="btn1">Click Away</button>
        <div id="out"></div>
        <script type="text/javascript">

            function addMessage( msg ){
                document.getElementById("out").innerHTML += (new Date().toTimeString()) + " : " + msg + "<br/><br/>";
            }

            function singleClick(){
                addMessage( "single");
            }

            function addDoubleClickProtection( element, fncToCall ){            
                var isClicked = false;
                var timer = null;
                element.onclick = function(){
                    if(!isClicked){
                        isClicked = true;
                        timer = window.setTimeout( function(){ isClicked = false; }, 200);  
                        return fncToCall();
                    }
                }
            }

            addDoubleClickProtection( document.getElementById("btn1"), singleClick );

        </script>
    </body>
</html>

Answer 6

一种简单的方法，通过计算提交按钮的点击次数，并以最少的装饰即可：

<script>
var click_count = 0;
function submit_once () {
  document.forms.A.elements.cmd.forEach(
    function(e,i,l){e.style.color="#888";}); 
  return (click_count++ > 1); 
}
function reset_count () { 
  document.forms.A.elements.cmd.forEach(
    function(e,i,l){e.style.color="unset";}); 
  click_count = 0; 
}
</script>
<form name="A">
<button type="submit" name="cmd" value="doAdd" 
  onclick="return submit_once();">Do add</button>
<button type="submit" name="cmd" value="doDel" 
  onclick="return submit_once();">Do delete</button>
</form>

Answer 7

您可以创建一个将使用once函数的实用程序函数CB。并且所有逻辑句柄seamlessly。您不必创建global variable到count or update。

function once(cb) {
  let once = false;
  return (...args) => {
    !once && cb(...args);
    once = true;
  };
}

//使用方法。

//创建/绑定功能

const log = once((data) => {
  console.log(data);
});

//使用它

Promise.resolve("hellowold").then(log).then(log);

每行仅打印一次。

使用ajax调用阻止双击按钮

7 个答案: