99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

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

為容縣等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及容縣網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、容縣網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

在微信小程序中 最常用的控件 可以用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) 則反過來 點(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í)直接沒顯示
后通過打印log發(fā)現(xiàn)是當(dāng)點(diǎn)擊圖片觸發(fā)了ShowMenuList事件后 HideMenuList事件也被觸發(fā)了（且總在ShowMenuList事件之后）

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

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

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

PS:第二種情況的方式 以前在html及Android環(huán)境下都有用過 是沒有這個(gè)問題的，可能微信小程序這方面的底層機(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ì)在該頁面對(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之間的問題”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站名稱：如何解決微信小程序中視圖控件與bindtap之間的問題-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://ef60e0e.cn/article/pgcii.html