在微信小程序中 最常用的<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 style="background-color:#eee;" 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") }, 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
