PC端的长按事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<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>
posted @ 2017-11-16 10:40  乐得逍遥  阅读(1146)  评论(0编辑  收藏  举报