[已解决]【WEB】怎么在js中使鼠标不能连续点击

Sorawithcat

以下是js部分代码，我想要的是在onmouseup执行完之前让鼠标不能再次按下，或者说是不能再次执行按下事件。

1. function sleep(time) {
   
2.             return new Promise((resolve) => setTimeout(resolve, time));
   
3.         }
   
4. 
   
5.         var ganzi = document.getElementById("ganzi")
   
6.         var longth = 0;
   
7.         var longthban = 0;
   
8.         var interval;
   
9.         window.onmousedown = function (event) {
   
10.             interval = setInterval(function () {
    
11.                 longth++;
    
12.                 longthban = Math.floor(longth / 2);
    
13.                 ganzi.style.transform = `translateY(-${longth}px)` //让杆子向上增长
    
14.                 setGanZiLongth(longth);
    
15.             }, 10);
    
16.         }
    
17.         window.onmouseup = async function () {
    
18.             clearInterval(interval); // 清除定时器
    
19.             ganzi.style.transform = `translateY(-${longthban}px)translateX(${longthban}px)rotate(90deg)`
    
20.             await sleep(1500);
    
21.             isSuccess();
    
22.         };

复制代码

最佳答案

月排行榜 / 总排行榜

FishC

2024-1-17 10:48:59

你可以在鼠标按下事件触发后，将鼠标点击事件禁用一段时间。这样可以防止用户连续点击。

首先，在你的代码中添加一个变量`isClickEnabled`来控制鼠标点击的启用和禁用状态：

1. var isClickEnabled = true;

复制代码

然后，在鼠标按下事件处理程序中，你可以使用这个变量来判断是否允许继续进行点击操作：

1. window.onmousedown = function (event) {
   
2.   if (isClickEnabled) {
   
3.     // 点击操作的代码
   
4.    
   
5.     isClickEnabled = false; // 禁用点击操作
   
6.   }
   
7. };

复制代码

接着，在适当的地方（比如`onmouseup`事件处理程序）将`isClickEnabled`重新设置为`true`以重新启用点击操作：

1. window.onmouseup = async function () {
   
2.   // 松开操作的代码
   
3.   
   
4.   isClickEnabled = true; // 启用点击操作
   
5. };

复制代码

这样就可以实现在`onmouseup`执行完之前禁用鼠标连续点击。

完整的代码示例：

1. function sleep(time) {
   
2.   return new Promise((resolve) => setTimeout(resolve, time));
   
3. }
   
4. 
   
5. var ganzi = document.getElementById("ganzi");
   
6. var longth = 0;
   
7. var longthban = 0;
   
8. var interval;
   
9. var isClickEnabled = true; // 添加点击启用和禁用变量
   
10. 
    
11. window.onmousedown = function (event) {
    
12.   if (isClickEnabled) {
    
13.     interval = setInterval(function () {
    
14.       longth++;
    
15.       longthban = Math.floor(longth / 2);
    
16.       ganzi.style.transform = `translateY(-${longth}px)`; //让杆子向上增长
    
17.       setGanZiLongth(longth);
    
18.     }, 10);
    
19. 
    
20.     isClickEnabled = false; // 禁用点击操作
    
21.   }
    
22. };
    
23. 
    
24. window.onmouseup = async function () {
    
25.   clearInterval(interval); // 清除定时器
    
26.   ganzi.style.transform = `translateY(-${longthban}px)translateX(${longthban}px)rotate(90deg)`;
    
27.   await sleep(1500);
    
28.   isSuccess();
    
29. 
    
30.   isClickEnabled = true; // 启用点击操作
    
31. };

复制代码

希望可以帮到你！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

跳转到最佳答案楼层

FishC

你可以在鼠标按下事件触发后，将鼠标点击事件禁用一段时间。这样可以防止用户连续点击。

首先，在你的代码中添加一个变量`isClickEnabled`来控制鼠标点击的启用和禁用状态：

1. var isClickEnabled = true;

复制代码

然后，在鼠标按下事件处理程序中，你可以使用这个变量来判断是否允许继续进行点击操作：

1. window.onmousedown = function (event) {
   
2.   if (isClickEnabled) {
   
3.     // 点击操作的代码
   
4.    
   
5.     isClickEnabled = false; // 禁用点击操作
   
6.   }
   
7. };

复制代码

接着，在适当的地方（比如`onmouseup`事件处理程序）将`isClickEnabled`重新设置为`true`以重新启用点击操作：

1. window.onmouseup = async function () {
   
2.   // 松开操作的代码
   
3.   
   
4.   isClickEnabled = true; // 启用点击操作
   
5. };

复制代码

这样就可以实现在`onmouseup`执行完之前禁用鼠标连续点击。

完整的代码示例：

1. function sleep(time) {
   
2.   return new Promise((resolve) => setTimeout(resolve, time));
   
3. }
   
4. 
   
5. var ganzi = document.getElementById("ganzi");
   
6. var longth = 0;
   
7. var longthban = 0;
   
8. var interval;
   
9. var isClickEnabled = true; // 添加点击启用和禁用变量
   
10. 
    
11. window.onmousedown = function (event) {
    
12.   if (isClickEnabled) {
    
13.     interval = setInterval(function () {
    
14.       longth++;
    
15.       longthban = Math.floor(longth / 2);
    
16.       ganzi.style.transform = `translateY(-${longth}px)`; //让杆子向上增长
    
17.       setGanZiLongth(longth);
    
18.     }, 10);
    
19. 
    
20.     isClickEnabled = false; // 禁用点击操作
    
21.   }
    
22. };
    
23. 
    
24. window.onmouseup = async function () {
    
25.   clearInterval(interval); // 清除定时器
    
26.   ganzi.style.transform = `translateY(-${longthban}px)translateX(${longthban}px)rotate(90deg)`;
    
27.   await sleep(1500);
    
28.   isSuccess();
    
29. 
    
30.   isClickEnabled = true; // 启用点击操作
    
31. };

复制代码

希望可以帮到你！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。