免费国产欧美国日产_少妇AV一区二区三区无码_蜜桃精品av无码喷奶水小说_jk18禁网站视频_精产国品一二三级产品区别_被夫の上司に犯波多野结衣_78m成人手机免费看_最爽最刺激18禁视频_偷偷色噜狠狠狠狠的777米奇

易優(yōu)GEO 重磅上線 ~ 一站式GEO優(yōu)化工具,讓豆包、文心一言、DeepSeek 在回答中主動(dòng)推薦你的品牌,搶占AI流量入口!  點(diǎn)擊查看

小程序模板網(wǎng)

微信小程序長(zhǎng)按事件觸發(fā)點(diǎn)擊事件的BUG處理

發(fā)布時(shí)間:2018-04-20 10:57 所屬欄目:小程序開(kāi)發(fā)教程

微信小程序開(kāi)發(fā)說(shuō)實(shí)話還是有點(diǎn)糟心的,經(jīng)過(guò)時(shí)間冒泡的坑之后,又遇到了長(zhǎng)按事件(longtap)必觸發(fā)點(diǎn)擊事件(tap)的BUG

如下代碼

  • wxml
<viewclass="container">
  <view>
    <buttonbindtap="tap"bindlongtap="longtap">長(zhǎng)按我</button>
  </view>
</view>
  • js
Page({
  data: {
  },
  tap: function(){
    console.log('觸發(fā)了 tap')
  },
  longtap: function(){
    console.log('觸發(fā)了 longtap')
  }
})
  • 效果

解決方法

Google后確定是BUG后,看了一下網(wǎng)上的解決方法,基本都是通過(guò) touchstart 和 touchend重新判定 tap 和 longtap 事件的,個(gè)人不是很喜歡。

看一下微信小程序的事件定義:

  • tap, 手指觸摸后馬上離開(kāi)
  • longtap, 手指觸摸后,超過(guò)350ms再離開(kāi)

也就是說(shuō),目前的觸發(fā)的順序是 longtap -> touchend -> tap

那么其實(shí)解決也很清晰了,簡(jiǎn)單來(lái)說(shuō)就是 加把鎖 , 應(yīng)用到上面的代碼上:

Page({
  data: {
    lock: false
  },
  tap: function(){
    //檢查鎖
    if (this.data.lock) {
      return;
    }
    console.log('觸發(fā)了 tap')
  },
  touchend: function(){
    if (this.data.lock) {
      //開(kāi)鎖
      setTimeout(()=> {
        this.setData({ lock: false });
      }, 100);
    }
  },
  longtap: function(){
    //鎖住
    this.setData({lock: true});
    console.log('觸發(fā)了 longtap')
  }
})

看一下效果

延伸

大部分情況下,我們都是不需要在 touchend 中加鎖的,因?yàn)殚L(zhǎng)按操作會(huì)觸發(fā)其他的異步操作,只要保證異步操作的最后把鎖解除了即可。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://www.szcjxy.com/wxmini/doc/course/23772.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢: 點(diǎn)擊咨詢
在線客服