Javascript 学习之路：鼠标长按事件

最新推荐文章于 2021-04-30 02:19:31 发布

weixin_30706691

最新推荐文章于 2021-04-30 02:19:31 发布

阅读量91

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/binmengxue/p/5382896.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <input type="button" onmousedown="holdDown()" onmouseup="holdUp()" value="鼠标长按" />
        <script type="text/javascript">  
            var timeStart,timeEnd,time;//申明全局变量
            
            function getTimeNow()//获取此刻时间
            {
                var now=new Date();
                return now.getTime();
            }
            function holdDown()//鼠标按下时触发
            {
                timeStart=getTimeNow();//获取鼠标按下时的时间
                time=setInterval(function()//setInterval会每100毫秒执行一次
                {
                    timeEnd=getTimeNow();//也就是每100毫秒获取一次时间
                    if(timeEnd-timeStart>1000)//如果此时检测到的时间与第一次获取的时间差有1000毫秒
                    {
                        clearInterval(time);//便不再继续重复此函数 （clearInterval取消周期性执行）
            　　　     alert("长按");//并弹出代码
                    }
                },100);
            }
            function holdUp()
            {
                clearInterval(time);//如果按下时间不到1000毫秒便弹起，
            }
          </script> 
    </body>
</html>