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>

如果您希望函数正常运行仅在最后一次 click 大于1秒前运行（而不是最后一次 function full run 在一秒以上）），对其进行更改，以便将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>

Javascript双击事件问题

5 个答案: