[已解决]onmousedown失效

Sorawithcat

我尝试了onmousedown和onpointerdown，但是在按下时并没有持续触发函数，仅执行了一次

1. var ganzi = document.getElementById("ganzi")
   
2.         var longth = 0;
   
3.         window.onpointerdown = function () {
   
4.             longth++;
   
5.             console.log(longth)
   
6.             setGanZiLongth(longth);
   
7.         }
   
8. 
   
9.         //设置杆子长度
   
10.         function setGanZiLongth(longth) {
    
11.             var ganzi = document.getElementById("ganzi");
    
12.             ganzi.style.height = `${longth}px`
    
13.         }

复制代码

最佳答案

月排行榜 / 总排行榜

FishC

2024-1-16 19:02:56

onmousedown和onpointerdown事件确实只会在按下时触发一次，而不会持续触发函数。如果你希望在按下时持续触发函数，可以使用setInterval来定时执行函数。

以下是一个使用setInterval的示例代码：

1. var ganzi = document.getElementById("ganzi");
   
2. var longth = 0;
   
3. var interval;
   
4. 
   
5. ganzi.onmousedown = function () {
   
6.     interval = setInterval(function () {
   
7.         longth++;
   
8.         console.log(longth);
   
9.         setGanZiLongth(longth);
   
10.     }, 100); // 每100毫秒执行一次函数
    
11. };
    
12. 
    
13. ganzi.onmouseup = function () {
    
14.     clearInterval(interval); // 清除定时器
    
15. };
    
16. 
    
17. // 设置杆子长度
    
18. function setGanZiLongth(longth) {
    
19.     ganzi.style.height = `${longth}px`;
    
20. }

复制代码

在上面的代码中，我们使用了onmousedown事件来启动定时器，并在每次定时器执行时增加longth的值并调用setGanZiLongth函数来更新杆子的长度。然后，在onmouseup事件中清除定时器，以停止持续触发函数。你可以根据实际需求调整定时器的间隔时间。

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

跳转到最佳答案楼层

FishC

onmousedown和onpointerdown事件确实只会在按下时触发一次，而不会持续触发函数。如果你希望在按下时持续触发函数，可以使用setInterval来定时执行函数。

以下是一个使用setInterval的示例代码：

1. var ganzi = document.getElementById("ganzi");
   
2. var longth = 0;
   
3. var interval;
   
4. 
   
5. ganzi.onmousedown = function () {
   
6.     interval = setInterval(function () {
   
7.         longth++;
   
8.         console.log(longth);
   
9.         setGanZiLongth(longth);
   
10.     }, 100); // 每100毫秒执行一次函数
    
11. };
    
12. 
    
13. ganzi.onmouseup = function () {
    
14.     clearInterval(interval); // 清除定时器
    
15. };
    
16. 
    
17. // 设置杆子长度
    
18. function setGanZiLongth(longth) {
    
19.     ganzi.style.height = `${longth}px`;
    
20. }

复制代码

在上面的代码中，我们使用了onmousedown事件来启动定时器，并在每次定时器执行时增加longth的值并调用setGanZiLongth函数来更新杆子的长度。然后，在onmouseup事件中清除定时器，以停止持续触发函数。你可以根据实际需求调整定时器的间隔时间。

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