×

按我这么久想干什么

作者:ceshi2017.09.05来源:Web前端之家浏览:8731评论:0
关键词:js

我们知道在JS中并没鼠标长按事件,但我们仍然能通过mousedown、mouseup事件来实现判断鼠标左键被按住不放的状态,原理其实很简单,只要在思路上解决以下3个问题:

1. 按住不放,就是按下,并没有立刻弹起.

2. [假设按下1s,有效]在mousedown方法下我们编写处理代码,但是要让他在1s后运行.对,setTimeout.

3. 这是还有一个问题,点击也会触发.这时我们需要在mouseup方法处理.当鼠标弹起时,我们判断此时setTimeout是否被运行,如果被运行,那说明mousedown超过一分钟,就不做任何处理.否则,说明没有按住鼠标一定时间[超过1s],则终止mousedown的方法,既是终止setTimeout.故,clearTimeout.

<!DOCTYPE html>  <html> 
<head>
    <title>JS判断鼠标按住不放触发事件</title>
    <script src="/demo/js/jq.js"></script>
    <script>
        $(document).ready(function() {
            $("input").mousedown(function() {
                var flag = false;
                var stop;
                stop = setTimeout(function() {//down 1s,才运行。
                    flag = true;
                    alert("这里可以是你想执行的代码.");
                }, 1000);
                $("input").mouseup(function() {//鼠标up时,判断down了多久,不足一秒,不执行down的代码。
                    if (!flag) {
                        clearTimeout(stop);
                    }
                });
            });
        });
    </script></head><body>
    <input value="按住我1秒钟才行" /></body></html>

原生JS代码:

<!DOCTYPE HTML>  <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
    <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>

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js2342348234723.html

网友评论文明上网理性发言 已有0人参与

发表评论: