zoukankan      html  css  js  c++  java
  • 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);
    }

  • 相关阅读:
    [树状数组]JZOJ 4658 小Z调顺序
    [差分数组]JZOJ 3187 的士
    [BFS]JZOJ 4671 World Tour
    [BFS]JZOJ 4672 Graph Coloring
    [数学]JZOJ 4673 LCS again
    shell:正则表达式和文本处理器
    开发脚本自动部署及监控
    Linux中的重启命令
    nginx和nfs
    网络相关配置
  • 原文地址:https://www.cnblogs.com/menglong1214/p/10469863.html
Copyright © 2011-2022 走看看