js单双击互斥
时间: 2023-08-20 11:06:03 浏览: 115
实现js单双击互斥的方法有很多种,以下是其中一种比较常见的实现方式:
```html
<button onclick="handleClick(event)" ondblclick="handleDoubleClick(event)">点击我</button>
```
```javascript
let clickTimer = null;
function handleClick(event) {
if (clickTimer) {
clearTimeout(clickTimer);
clickTimer = null;
console.log('双击事件被阻止');
} else {
clickTimer = setTimeout(() => {
clickTimer = null;
console.log('单击事件被触发');
}, 300);
}
}
function handleDoubleClick(event) {
clearTimeout(clickTimer);
clickTimer = null;
console.log('双击事件被触发');
}
```
在这个实现中,我们使用了一个 `clickTimer` 变量来保存单击事件的计时器。当用户第一次点击按钮时,我们会启动一个计时器,并将它的引用保存在 `clickTimer` 变量中。如果用户在计时器完成之前再次点击了按钮,我们就会取消计时器,然后触发双击事件。如果计时器完成了,说明用户只是进行了单击操作,我们就触发单击事件。这样就可以实现单双击互斥了。