你的位置:首页 > Java教程

[Java教程]Javascript 学习之路:鼠标长按事件


 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <meta charset="utf-8" /> 5     <title></title> 6   </head> 7   <body> 8     <input type="button" onmousedown="holdDown()" onmouseup="holdUp()" value="鼠标长按" /> 9     <script type="text/javascript"> 10       var timeStart,timeEnd,time;//申明全局变量11       12       function getTimeNow()//获取此刻时间13       {14         var now=new Date();15         return now.getTime();16       }17       function holdDown()//鼠标按下时触发18       {19         timeStart=getTimeNow();//获取鼠标按下时的时间20         time=setInterval(function()//setInterval会每100毫秒执行一次21         {22           timeEnd=getTimeNow();//也就是每100毫秒获取一次时间23           if(timeEnd-timeStart>1000)//如果此时检测到的时间与第一次获取的时间差有1000毫秒24           {25             clearInterval(time);//便不再继续重复此函数 (clearInterval取消周期性执行)26             alert("长按");//并弹出代码27           }28         },100);29       }30       function holdUp()31       {32         clearInterval(time);//如果按下时间不到1000毫秒便弹起,33       }34      </script> 35   </body>36 </html>

 通过setInterval()方法可以按周期执行代码段,并返回一个标识性的值(可以理解为周期性调用函数的过程)。调用clearInterval(返回的参数) 方法可以结束该重复性过程。

 

效果:只要长按时间到达1000毫秒,无论是否弹起鼠标,都会触发。反之,如果不到1000毫秒,鼠标弹起的时候会结束。