英文:
How to put a function for click and another for double click on the same element?
问题
我试图为一个元素实现两种不同的功能，一个是单击后，另一个是双击后。我正在使用setTimeout来检测单击事件，但这种方式会导致两个功能都被执行，因为setTimeout会继续计时。所以我想到了在第二次点击后停止计时，但之后setTimeout停止工作，一切都被视为双击。所以我将代码模型化，直到看起来像这样：
function howManyClicks(element){
var time;
let realization = new Promise((resolve)=>{
time = setTimeout(()=>{
resolve(1);
element.removeEventListener('click', doubleClick);
}, 200);
element.addEventListener('click', doubleClick);
function doubleClick(){
element.removeEventListener('click', doubleClick);
clearTimeout(time);
resolve(2);
}
});
realization.then((value)=>{
return value;
});
}
我认为已经有足够多的非功能性和不必要的东西在这里，但它们是我为了达到目标而尝试的。有谁知道如何解决这个问题吗？
英文:
I'm trying to implement two different functionalities to an element, one after a single click and another one after two clicks. I'm using a setTimeout to detect when a single click is performed, but this way both functions end up being performed, because the setTimeout continues counting, so I had the idea of stopping the time as soon as the second click is performed, but after that the setTimeout stops working and everything is seen as a double click, so I modeled everything until it looked like this
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function howManyClicks(element){
var time;
let realization = new Promise((resolve)=>{
time = setTimeout(()=>{
resolve(1);
element.removeEventListener('click', dobleClick);
}, 200);
element.addEventListener('click', dobleClick);
function dobleClick(){
element.removeEventListener('click', dobleClick);
clearTimeout(time);
resolve(2);
}
});
realization.then((value)=>{
return value;
});
}
<!-- end snippet -->
I think there are already enough non-functional and unnecessary things there, but they were my attempts to reach that goal. Does anyone know how to resolve?
答案1
得分: 1
除了我们的朋友指出已经存在一个双击事件的事实之外...
几乎总是在双击触发之前触发单击，因为大多数用户无法完美同步两个按钮以防止左按钮触发，所以这是一个不好的主意，几乎没有人使用双击事件的原因。
因此，对于没有冲突的双鼠标按钮功能，最好的解决方案是使用左右鼠标按钮...
element.addEventListener('click', function_A); // 左击
element.addEventListener('contextmenu', function_B); // 右击
虽然我不知道右键或双击在Macintosh上如何工作，因为我从未使用过！ 
英文:
Other than the fact that there already exists a double click event which our friend above pointed out...
A double click will almost always trigger a single click prior to a double click firing, because most users out there can't perfectly synchronize the two buttons to prevent the left button from firing, so it's a bad idea and the reason next to nobody uses the dblclick event.
Therefore the best solution for dual mouse button functions with no conflicts, is to use the left and right mouse buttons...
element.addEventListener('click',function_A); // left click
element.addEventListener('contextmenu',function_B); // right click
Although I have no idea how the right or double clicks would work on a Macintosh having never used one!
答案2
得分: 0
var clicks = 0;
function func(element){
clicks++;
let time = setTimeout(() => {
if(clicks == 1){
element.innerHTML = 'One click';
clicks = 0;
}
}, 200);
if(clicks == 2){
element.innerHTML = 'Two clicks';
clearTimeout(time);
clicks = 0;
}
}
<button onclick="func(this)">Button</button>
Enjoy!!!
<details>
<summary>英文:</summary>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var clicks = 0;
function func(element){
clicks++;
let time = setTimeout(()=>{
if(clicks == 1){
element.innerHTML = 'One click';
clicks = 0;
}
},200);
if(clicks == 2){
element.innerHTML = 'Two clicks';
clearTimeout(time);
clicks = 0;
}
}
<!-- language: lang-html -->
<button onclick="func(this)">Button</button>
<!-- end snippet -->
Enjoy!!!
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论