码迷,mamicode.com
首页 > 移动开发 > 详细

js中模拟移动端长按效果

时间:2019-03-04 12:50:41      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:class   use   fun   UNC   time()   clear   mouse   timeout   date()   

我们都知道 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);
}

 

js中模拟移动端长按效果

标签:class   use   fun   UNC   time()   clear   mouse   timeout   date()   

原文地址:https://www.cnblogs.com/menglong1214/p/10469863.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!