Javascript：到处禁用双击

Question

我想在我的应用程序中的任何地方禁用双击以避免出现多个问题（例如，对 apis 的两次调用）。

我试图监听文档上的所有 'dblclick' 事件并停止传播，但不起作用，点击被执行。

我要防止两个快速连续单击。

 document.addEventListener('dblclick', (event) => { console.log('click disabled;'). event;preventDefault(). event;stopPropagation(); return false, }; true). function testClick(){ console;log('click reached.'); } function testDblClick() { console.log('dblclick reached!'); }

 <button onclick="testClick()" ondblclick="testDblClick()">Try double click</button>

Answer 1

您的代码确实阻止了dblclick ，但没有检查是否阻止。 它不会阻止快速连续的两次click 。

给你两个答案：

通过禁止重叠请求来处理它

与其阻止标准浏览器行为（这会让尝试使用双击页面中的 select 字词等的用户感到惊讶），不如确保您的代码在不应该允许重叠请求时不允许重叠请求。 例如：

 // Stand-in for something that takes time function doSomethingThatTakesTime() { return new Promise(resolve => setTimeout(resolve, 2000)); } // Code triggered by the button let running = 0; function doOperation() { if (running > 0) { console.log("Call ignored, already running"); return; } ++running; updateUI(); console.log("Started running"); doSomethingThatTakesTime().finally(() => { console.log("Done running"); --running; updateUI(); }); } // Update the UI to match our current state function updateUI() { document.getElementById("btn-start").disabled = running > 0; } // Handle clicks on the button document.getElementById("btn-start").addEventListener("click", doOperation);

 <button id="btn-start">Click to start</button>

防止在 X 毫秒内两次单击同一元素

我不推荐这样做，但它会阻止在 X 毫秒内对同一元素进行两次点击的处理：

 document.getElementById("btn-start").addEventListener("click", function() { console.log("Do the operation"); }); let lastClickElement = null; let lastClickTime = Date.now(); document.addEventListener("click", function(e) { const {target} = e; const now = Date.now(); if (target === lastClickElement && (now - lastClickTime) < 2000) { // Same element and less than two seconds console.log("Second click denied"); e.preventDefault(); e.stopPropagation(); } lastClickElement = target; lastClickTime = now; }, true);

 <button id="btn-start">Start Operation</button>

Answer 2

因为它在监听事件dblclick之前运行了 function testClick() ，所以您可以为 function testClick设置超时，如下所示：

onclick="setTimeout(testClick, 100)"