Javascript双击事件问题

Question

我在DOM元素上有一个点击监听器（没有jQuery）：

element.addEventListener('click', (e) => {
// some code
});

显然，当我单击时，代码将运行并且一切都很好。

问题是，当我双击时，代码运行两次，并且我不希望出现这种情况（当我双击时，我希望它像单击鼠标一样运行一次代码）。

Answer 1

一种可能性是使用Date来检查触发该功能的最后一次单击是否少于1秒前：

 const element = document.querySelector('div'); let lastClick = 0; element.addEventListener('click', (e) => { const thisClick = Date.now(); if (thisClick - lastClick < 1000) { console.log('quick click detected, returning early'); return; } lastClick = thisClick; console.log('click'); }); 

 <div>click me</div> 

如果您希望函数正常运行仅在最后一次单击超过1秒之前运行（而不是最后函数正常运行超过一秒钟之前），请对其进行更改，以便将lastClick分配给if (thisClick - lastClick < 1000) {有条件：

 const element = document.querySelector('div'); let lastClick = 0; element.addEventListener('click', (e) => { const thisClick = Date.now(); if (thisClick - lastClick < 1000) { console.log('quick click detected, returning early'); lastClick = thisClick; return; } lastClick = thisClick; console.log('click'); }); 

 <div>click me</div> 

Answer 2

您可以将值设置为输入之一，并查看值是否已更改

 function trigger(){ if(document.getElementById('isClicked').value ==0 ){ console.log('clicked for the first time'); document.getElementById('isClicked').value = 111; setTimeout(function(){ document.getElementById('isClicked').value = 0; }, 1000); } } 

 <button onclick='trigger()'>click me </button> <input type='hidden' value=0 id='isClicked' /> 

Answer 3

对事件进行去抖动以在特定时间段内触发：

 const element = document.querySelector('button'); let time; element.addEventListener('click', (e) => { if (time) { clearTimeout(time); } time = setTimeout(() => console.log('runs after last click'), 500); }); 

 <button>Click!!!</button> 

Answer 4

为此，最直接的解决方案是创建一个变量，该变量充当在一定时间（在本示例中为一秒钟）后重置的门。

 var el = document.querySelector('p'); var clickAllowed = true; el.addEventListener('click', e => { if (!clickAllowed) { return; } clickAllowed = false; setTimeout(() => clickAllowed = true, 1000); // do stuff here console.log('test'); }); 

 <p>Test</p> 

第一次单击时，您的代码将运行，并且“门”将关闭以停止第二次单击。 一秒钟后，“门”打开，以允许代码再次运行。

Answer 5

该代码为您工作

 var el=document.getElementById('demo'); window.clicks=0; // handle two click el.addEventListener('click',function(){ clicks++; el.innerHTML='clicks: '+clicks; setTimeout(function(){ if (clicks == 1) { runYourCode(); clicks=0; } else{ clicks=0; return; } },400); }) // dblclick event el.addEventListener('dblclick',function(){ runYourCode(); }) function runYourCode(){ document.getElementById('text').innerHTML += '<br>Run your Code...'; }; 

 #demo{ background:red; padding:5px 10px; color:white; max-width:100px; } 

 <p id="demo">click me!</p> <p id="text"> log:<br> </p>