如何解決微信小程序中視圖控件與bindtap之間的問題

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

在微信小程序中 最常用的<view>控件 可以用bindtap（冒泡反應） 如<view bindtap="ItemOnclick" data-mType="123">的形式綁定ItemOnclick事件并傳遞一個dataset，其包含一個名為mType的元素 值為123。

在某一次設計中

有如下結構：

  <view class="func-m" bindtap="ItemOnclick" data-mType="123">
    <image src="{{ROOT_PATH}}/images/icon1.png" />
  </view>

ItemOnclick事件在點擊在圖片上時不會觸發 需要點擊在圖片之外及外層view范圍之內的地方 才會觸發

若將bindtap寫在<image>標簽內 則反過來 點擊圖片會觸發 但點擊在圖片之外及外層view范圍之內的地方不會觸發

由此我做出判斷

點擊事件不會向父級或子級控件傳遞。

（然而這與冒泡反應的定義是不一致的）

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

<view  bindtap="HideMenuList"><!--此為最外層view-->
  <image src="{{ROOT_PATH}}/images/icon1.png" bindtap="ShowMenuList" />
  <view class="menu-list">
     <view class="menu-item" data-mType="CP" bindtap="MenuItemOnclick">
     </view>
     <view class="menu-item" data-mType="HW" bindtap="MenuItemOnclick">
     </view>
   </view>
</view>

需要實現 點擊圖片 顯示菜單列表 點擊每個菜單項 觸發MenuItemOnclick事件并傳遞對應的參數

然后當在<view class="menu-list">標簽外的地方點擊一下 就觸發HideMenuList事件隱藏菜單

而實際產生的效果是 當點擊圖片時 菜單列表一閃便消失 有時直接沒顯示
后通過打印log發現是當點擊圖片觸發了ShowMenuList事件后 HideMenuList事件也被觸發了（且總在ShowMenuList事件之后）

即點擊事件由<image>傳遞到了外層的<view> 因而觸發了HideMenuList事件

這樣的話那之前的判斷就是錯誤的

目前還沒找到這兩種情況之間的關鍵差異,第二種情況的解決方案是 當顯示菜單時 同時創造一個透明遮罩層覆蓋除菜單列表外的區域，點擊到這個透明遮罩層后觸發HideMenuList事件并銷毀或隱藏遮罩層

PS:第二種情況的方式 以前在html及Android環境下都有用過 是沒有這個問題的，可能微信小程序這方面的底層機制和html及Android不一樣，還待深究。

微信小程序bindtap與catchtap的區別詳解

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

bindtap和catchtap都是當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數。

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

//視圖層
<view id="outer" bindtap="handleTap1">   //在組件中綁定bindtap事件 函數handleTap1
 outer view
 <view id="middle" catchtap="handleTap2"> //在組件中綁定catchtap事件 函數handleTap2
  middle view
  <view id="inner" bindtap="handleTap3"> //在組件中綁定bindtap事件 函數handleTap3
   inner view
  </view>
 </view>
</view>

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

關于“如何解決微信小程序中視圖控件與bindtap之間的問題”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。