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毫秒，鼠标弹起的时候会结束。