移动端的touch事件和click事件遇到的坑

我的博客查看文章点这里

项目需求：

（移动端项目中）长按聊天消息，出现一个弹出层，进行消息撤回操做，点击弹出层以外的其余地方须要隐藏该弹出层。

基础html代码：

<div>
    <ul class="press-operation">
        <li>复制</li>
        <li>撤回</li>
    </ul>
    <div @touchstart="keepPress($event)" @touchmove="" @touchend="keepPressEnd($event)" @touchcancel="">
        <img class="img" src="" />
    </div>
</div>

复制代码

需求实现：

// 经过定时器，只有长按超过500ms是才进行须要的操做
    // 按下时触发
    keepPress(event){
        let nodeEl = event.currentTarget.parentElement.firstElementChild
        this.pressTimer = setInterval(() => {
          nodeEl.style.display = 'block'
        },500)
    }
    // 松开时触发
    keepPressEnd(event){
        clearInterval(this.pressTimer)
      },
      
    // 点击弹出层其余地方关闭弹出层
    document.addEventListener('click',function () {
        $('.press-operation').hide()
      })
复制代码

问题一：

在安卓中，上面的代码能实现咱们的需求，可是，在IOS中，长按松开后，弹出层就立马关闭了！！！

了解了下touch和click事件：

touchstart:

• touchstart 手指触碰开始就能触发

click:

• 1.手指触碰
• 2.手指未在屏幕上移动
• 3.在这个dom上手指离开屏幕
• 4.触摸和离开屏幕之间的时间间隔较短

上网一顿搜索发现touch和click的执行顺序：

touchstart --> touchmove --> touchend --> touchcancel --> click

因此，执行完touch事件后会执行click事件，在ios中就会出现长按松开后就会关闭弹出层。这里咱们须要阻止touch事件的默认行为使用event.preventDefault()

修改下==keepPress==中的代码

keepPress(event){
        event.preventDefault()  // <==添加了这句
        let nodeEl = event.currentTarget.parentElement.firstElementChild
        this.pressTimer = setInterval(() => {
          nodeEl.style.display = 'block'
        },500)
    }

复制代码

这样代码就能知足咱们的需求了。

问题二：

当咱们发送的消息是图片消息时，咱们须要点击图片放大，长按图片也出现撤销的弹出层。经过前面的分析，当click和touch事件同时存在时会先触发touch，再触发click 。由于咱们阻止了touch事件的默认行为，因此，咱们点击图片的时候并不会触发click事件，图片也就不会放大。

这里咱们须要在==touchend==中作处理，若是长按时间短，就用代码触发图片的点击事件，长按时间长，就不触发图片的点击事件。

修改前面的代码：

keepPress(event){
       event.preventDefault()
       this.pressTime = 0 // 清0计数器
       $('.press-operation').hide() // 每次长按会先隐藏全部的弹出层
       let nodeEl = event.currentTarget.parentElement.firstElementChild
       this.pressTimer = setInterval(() => {
         this.pressTime = this.pressTime + 1
           nodeEl.style.display = 'block'
       },500)
     },
     keepPressEnd(event){
       let el = event.currentTarget.getElementsByClassName('img')[0]
       clearInterval(this.pressTimer)
       if(this.pressTime < 1){ // 长按时间不足500ms时，触发点击事件
         if(el){
           el.click()
         }

       }
     },
复制代码

到此为止，应该是知足了个人需求了

感谢您的阅读

若有不对，欢迎指正。若有其余实现方法，欢迎留言讨论～