移动端双击事件

做移动端项目一般情况下会添加meta标签来屏蔽双击事件和手势放大用来禁止屏幕放大

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

新版本IOS手势放大仍可以放大不受meta标签控制（了解一下不讨论）

一些移动端浏览器也会自动屏蔽双击事件

移动端模拟双击事件

    let clicked = 1
    let clickedTime = {
      timeA: '',
      timeB: ''
    }
    function clicking () {
      if (clicked === 1) {
        clickedTime.timeA = new Date()
        clicked++
      } else if (clicked === 2) {
        clickedTime.timeB = new Date()
        if (Math.abs(clickedTime.timeA - clickedTime.timeB) < 300) {
          //  双击
          b()
          clicked = 1
        } else {
          clickedTime.timeA = new Date()
        }
      }
    }
    function b () {
      console.log('双击')
    }

移动端判别单击双击事件（单击事件会出现延迟）

    let clicked = 1
    let time = null
    function clicking() {
      if (clicked === 1) {
        clicked++
        time = setTimeout(() => {
          clicked = 1
          // 单击
          a()
        }, 300)
      } else if (clicked === 2) {
        clearInterval(time)
        clicked = 1
        // 双击
        b()
      }
    }
    function a () {
      console.log('单击')
    }
    function b () {
      console.log('双击')
    }

相关推荐