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

zone 發(fā)布于2019-08-20 17:40 / 926人閱讀

摘要：微信小程序開(kāi)發(fā)說(shuō)實(shí)話(huà)還是有點(diǎn)糟心的，經(jīng)過(guò)事件冒泡的坑之后，又遇到了長(zhǎng)按事件必觸發(fā)點(diǎn)擊事件的實(shí)例代碼長(zhǎng)按我觸發(fā)了觸發(fā)了效果解決方法后確定是小程序有意為之后，看了一下網(wǎng)上的解決方法，基本都是通過(guò)和重新判定和事件的，個(gè)人不是很喜歡。

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

實(shí)例代碼

wxml

Page({
  data: {
  },
  tap: function() {
    console.log("觸發(fā)了 tap")
  },
  longtap: function () {
    console.log("觸發(fā)了 longtap")
  }
})

效果

解決方法

Google后確定是小程序有意(B)為(U)之(G)后，看了一下網(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ā)其他的異步操作，只要保證異步操作的最后把鎖解除了即可。

云服務(wù)器 GPU云服務(wù)器事件處理程序 js事件處理程序 html的點(diǎn)擊事件吧html的點(diǎn)擊事件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/83770.html

相關(guān)文章

微信小程序開(kāi)發(fā)中的二三事之網(wǎng)易云信IMSDK DEMO

摘要：傳統(tǒng)的網(wǎng)頁(yè)編程采用的三劍客來(lái)實(shí)現(xiàn)，在微信小程序中同樣有三劍客。觀察者模式不難實(shí)現(xiàn)，重點(diǎn)是如何在微信小程序中搭配其特有的生命周期來(lái)使用。交互事件傳統(tǒng)的事件傳遞類(lèi)型有冒泡型與捕獲型，微信小程序中自然也有。本文由作者鄒永勝授權(quán)網(wǎng)易云社區(qū)發(fā)布。簡(jiǎn)介為了更好的展示我們即時(shí)通訊SDK強(qiáng)悍的能力，網(wǎng)易云信IM SDK微信小程序DEMO的開(kāi)發(fā)就提上了日程。用產(chǎn)品的話(huà)說(shuō)就是: 云信 IM 小程序 S...

weij 2019-06-28 11:05 評(píng)論0 收藏0
微信小程序教學(xué)第四章第三節(jié)（含視頻）：小程序中級(jí)實(shí)戰(zhàn)教程：詳情-功能完善

摘要：詳情功能完善本文配套視頻地址開(kāi)始前請(qǐng)把分支中的目錄導(dǎo)入微信開(kāi)發(fā)工具這一節(jié)中，我們把詳情的其他功能完善起來(lái)下一篇分享返回列表。詳情 - 功能完善本文配套視頻地址：https://v.qq.com/x/page/f0555... 開(kāi)始前請(qǐng)把 ch4-3 分支中的 code/ 目錄導(dǎo)入微信開(kāi)發(fā)工具這一節(jié)中，我們把詳情的其他功能完善起來(lái)：下一篇、分享、返回列表。 Step 1....

phodal 2019-08-21 17:25 評(píng)論0 收藏0
微信小程序教學(xué)第四章第三節(jié)（含視頻）：小程序中級(jí)實(shí)戰(zhàn)教程：詳情-功能完善

摘要：詳情功能完善本文配套視頻地址開(kāi)始前請(qǐng)把分支中的目錄導(dǎo)入微信開(kāi)發(fā)工具這一節(jié)中，我們把詳情的其他功能完善起來(lái)下一篇分享返回列表。詳情 - 功能完善本文配套視頻地址：https://v.qq.com/x/page/f0555... 開(kāi)始前請(qǐng)把 ch4-3 分支中的 code/ 目錄導(dǎo)入微信開(kāi)發(fā)工具這一節(jié)中，我們把詳情的其他功能完善起來(lái)：下一篇、分享、返回列表。 Step 1....

cocopeak 2019-08-01 17:55 評(píng)論0 收藏0
微信小程序教學(xué)第四章第三節(jié)（含視頻）：小程序中級(jí)實(shí)戰(zhàn)教程：詳情-功能完善

摘要：詳情功能完善本文配套視頻地址開(kāi)始前請(qǐng)把分支中的目錄導(dǎo)入微信開(kāi)發(fā)工具這一節(jié)中，我們把詳情的其他功能完善起來(lái)下一篇分享返回列表。詳情 - 功能完善本文配套視頻地址：https://v.qq.com/x/page/f0555... 開(kāi)始前請(qǐng)把 ch4-3 分支中的 code/ 目錄導(dǎo)入微信開(kāi)發(fā)工具這一節(jié)中，我們把詳情的其他功能完善起來(lái)：下一篇、分享、返回列表。 Step 1....

fizz 2019-08-29 13:44 評(píng)論0 收藏0
微信小程序 — 速學(xué)速查筆記

摘要：配置配置全解析項(xiàng)目配置文件文件描述項(xiàng)目配置文件項(xiàng)目代碼配置是否檢查域名安全性和版本是否將項(xiàng)目的代碼轉(zhuǎn)成是否自動(dòng)補(bǔ)全兼容前綴是否壓縮代碼是否啟用新功能編譯方式版本號(hào)項(xiàng)目名項(xiàng)目配置搜索關(guān)鍵字客服編譯方式小程序配置項(xiàng)目路由設(shè)置第一項(xiàng)為首頁(yè)窗 1. 配置配置全解析 project.config.json ( 項(xiàng)目配置文件 ) { // 文件描述 description: 項(xiàng)目...

baukh789 2019-08-30 14:02 評(píng)論0 收藏0