這篇文章將為大家詳細(xì)講解有關(guān)如何解決微信小程序中視圖控件與bindtap之間的問(wèn)題，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

公司主營(yíng)業(yè)務(wù)：網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)建站推出宣恩免費(fèi)做網(wǎng)站回饋大家。

在微信小程序中 最常用的控件 可以用bindtap（冒泡反應(yīng)） 如的形式綁定ItemOnclick事件并傳遞一個(gè)dataset，其包含一個(gè)名為mType的元素 值為123。

在某一次設(shè)計(jì)中

有如下結(jié)構(gòu)：

ItemOnclick事件在點(diǎn)擊在圖片上時(shí)不會(huì)觸發(fā) 需要點(diǎn)擊在圖片之外及外層view范圍之內(nèi)的地方 才會(huì)觸發(fā)

若將bindtap寫在標(biāo)簽內(nèi) 則反過(guò)來(lái) 點(diǎn)擊圖片會(huì)觸發(fā) 但點(diǎn)擊在圖片之外及外層view范圍之內(nèi)的地方不會(huì)觸發(fā)

由此我做出判斷

點(diǎn)擊事件不會(huì)向父級(jí)或子級(jí)控件傳遞。

（然而這與冒泡反應(yīng)的定義是不一致的）

但是最近又碰到下面這種情況：

需要實(shí)現(xiàn) 點(diǎn)擊圖片 顯示菜單列表 點(diǎn)擊每個(gè)菜單項(xiàng) 觸發(fā)MenuItemOnclick事件并傳遞對(duì)應(yīng)的參數(shù)

然后當(dāng)在標(biāo)簽外的地方點(diǎn)擊一下 就觸發(fā)HideMenuList事件隱藏菜單

而實(shí)際產(chǎn)生的效果是 當(dāng)點(diǎn)擊圖片時(shí) 菜單列表一閃便消失 有時(shí)直接沒(méi)顯示
后通過(guò)打印log發(fā)現(xiàn)是當(dāng)點(diǎn)擊圖片觸發(fā)了ShowMenuList事件后 HideMenuList事件也被觸發(fā)了（且總在ShowMenuList事件之后）

即點(diǎn)擊事件由傳遞到了外層的 因而觸發(fā)了HideMenuList事件

這樣的話那之前的判斷就是錯(cuò)誤的

目前還沒(méi)找到這兩種情況之間的關(guān)鍵差異,第二種情況的解決方案是 當(dāng)顯示菜單時(shí) 同時(shí)創(chuàng)造一個(gè)透明遮罩層覆蓋除菜單列表外的區(qū)域，點(diǎn)擊到這個(gè)透明遮罩層后觸發(fā)HideMenuList事件并銷毀或隱藏遮罩層

PS:第二種情況的方式 以前在html及Android環(huán)境下都有用過(guò) 是沒(méi)有這個(gè)問(wèn)題的，可能微信小程序這方面的底層機(jī)制和html及Android不一樣，還待深究。

微信小程序bindtap與catchtap的區(qū)別詳解

參考官方文檔 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

bindtap和catchtap都是當(dāng)用戶點(diǎn)擊該組件的時(shí)候會(huì)在該頁(yè)面對(duì)應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)。

bind事件綁定不會(huì)阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡：

//視圖層
   //在組件中綁定bindtap事件 函數(shù)handleTap1
 outer view
  //在組件中綁定catchtap事件 函數(shù)handleTap2
  middle view
   //在組件中綁定bindtap事件 函數(shù)handleTap3
   inner view
  
 

//邏輯層
Page({
  handleTap1:function(event){  
  //點(diǎn)擊handleTap1輸出 outer view bindtap  
   console.log("outer view bindtap") 
  },
  handleTap2: function (event) { 
  //點(diǎn)擊handleTap2輸出 middle view catchtap
   console.log("middle view catchtap") 
  },
  handleTap3: function (event) { 
  //點(diǎn)擊handleTap3輸出 inner view bindtap middle view catchtap 
   console.log("inner view bindtap") 
  },

關(guān)于“如何解決微信小程序中視圖控件與bindtap之間的問(wèn)題”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。