我们知道在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> 
网友评论文明上网理性发言 已有0人参与
发表评论: