【WEB】怎么在js中使鼠标不能连续点击
以下是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();
}; 你可以在鼠标按下事件触发后，将鼠标点击事件禁用一段时间。这样可以防止用户连续点击。
首先，在你的代码中添加一个变量`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 小助理，如未能正确解答您的问题，请继续追问。
页:
[1]