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

Sorawithcat

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

 function sleep(time) {
            return new Promise((resolve) => setTimeout(resolve, time));
        }

        var ganzi = document.getElementById("ganzi")
        var longth = 0;
        var longthban = 0;
        var interval; 
        window.onmousedown = function (event) {
            interval = setInterval(function () {
                longth++;
                longthban = Math.floor(longth / 2);
                ganzi.style.transform = `translateY(-${longth}px)` //让杆子向上增长
                setGanZiLongth(longth);
            }, 10);
        }
        window.onmouseup = async function () {
            clearInterval(interval); // 清除定时器
            ganzi.style.transform = `translateY(-${longthban}px)translateX(${longthban}px)rotate(90deg)`
            await sleep(1500);
            isSuccess();
        };

最佳答案

月排行榜 / 总排行榜

FishC

2024-1-17 10:48:59

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

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

var isClickEnabled = true;

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

window.onmousedown = function (event) {
  if (isClickEnabled) {
    // 点击操作的代码
    
    isClickEnabled = false; // 禁用点击操作
  }
};

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

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

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

完整的代码示例：

function sleep(time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

var ganzi = document.getElementById("ganzi");
var longth = 0;
var longthban = 0;
var interval;
var isClickEnabled = true; // 添加点击启用和禁用变量

window.onmousedown = function (event) {
  if (isClickEnabled) {
    interval = setInterval(function () {
      longth++;
      longthban = Math.floor(longth / 2);
      ganzi.style.transform = `translateY(-${longth}px)`; //让杆子向上增长
      setGanZiLongth(longth);
    }, 10);

    isClickEnabled = false; // 禁用点击操作
  }
};

window.onmouseup = async function () {
  clearInterval(interval); // 清除定时器
  ganzi.style.transform = `translateY(-${longthban}px)translateX(${longthban}px)rotate(90deg)`;
  await sleep(1500);
  isSuccess();

  isClickEnabled = true; // 启用点击操作
};

希望可以帮到你！

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

跳转到最佳答案楼层

FishC

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

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

var isClickEnabled = true;

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

window.onmousedown = function (event) {
  if (isClickEnabled) {
    // 点击操作的代码
    
    isClickEnabled = false; // 禁用点击操作
  }
};

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

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

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

完整的代码示例：

function sleep(time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

var ganzi = document.getElementById("ganzi");
var longth = 0;
var longthban = 0;
var interval;
var isClickEnabled = true; // 添加点击启用和禁用变量

window.onmousedown = function (event) {
  if (isClickEnabled) {
    interval = setInterval(function () {
      longth++;
      longthban = Math.floor(longth / 2);
      ganzi.style.transform = `translateY(-${longth}px)`; //让杆子向上增长
      setGanZiLongth(longth);
    }, 10);

    isClickEnabled = false; // 禁用点击操作
  }
};

window.onmouseup = async function () {
  clearInterval(interval); // 清除定时器
  ganzi.style.transform = `translateY(-${longthban}px)translateX(${longthban}px)rotate(90deg)`;
  await sleep(1500);
  isSuccess();

  isClickEnabled = true; // 启用点击操作
};

希望可以帮到你！

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