js中模拟移动端长按效果
我们都知道 js 是有onmousedown(鼠标按下事件)和onmouseup(鼠标抬起事件),刚开始我的思路是 鼠标抬起时间减去鼠标按下时间
var oDiv = document.getElementById('div1'); var timer1; var timer2; oDiv.onmousedown = function () { timer1 = new Date(); } oDiv.onmouseup = function () { timer2 = new Date(); var timer3 = timer2.getTime() - timer1.getTime(); if (timer3 > 1000) alert('aa'); }
}
这么写倒是也能实现 但是 必须要 鼠标抬起才能触发(鼠标按住10秒不松开,也不会出现效果。。。实际测试效果很不爽,感觉特别扭)。这个跟咱们安卓的使用感觉是不同的。。。安卓的那个长按 是 按住开始计时到时间就立马出现效果,
于是最终改版如下:
var oDiv = document.getElementById('div1') var myVar; oDiv.onmousedown = function () { myVar = setTimeout(function () { alert('aa'); }, 1000); } oDiv.onmouseup = function () { clearTimeout(myVar); }