zoukankan      html  css  js  c++  java
  • 移动端h5模拟长按事件

    思路

    • 放弃click事件,通过判断按的时长来决定是单击还是长按
    • 使用touchstart和touchend事件
    • 在touchstart中开启一个定时器,比如在700ms后显示一个长按菜单
    • 在touchend中清除这个定时器,这样如果按下的时间超过700ms,那么长按菜单已经显示出来了,清除定时器不会有任何影响;如果按下的时间小于700ms,那么touchstart中的长按菜单还没来得及显示出来,就被清除了。
      由此我们可以实现模拟的长按事件了。
    let timer = null
    let startTime = ''
    let endTime = ''
    
    document.addEventListener('touchstart', function () {
      startTime = +new Date()
      timer = setTimeout(function () {
        // 处理长按事件
        console.log('long');
      }, 700)
    })
    
    document.addEventListener('touchend', function () {
      endTime = +new Date()
      clearTimeout(timer)
      if (endTime - startTime < 700) {
        // 处理点击事件
        console.log('no long');
      }
    })
    
  • 相关阅读:
    去重
    JavaScript 数组
    变量
    2017.3.19 for
    2017.3.19 if,for
    2017.3.14
    2017.3.10
    2017.3.9
    2017.3.7-1
    2017.3.7
  • 原文地址:https://www.cnblogs.com/ZerlinM/p/14108651.html
Copyright © 2011-2022 走看看