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

更新時間：2019年04月08日 11:33:53 作者：Amy安

這篇文章主要介紹了微信小程序視圖控件與bindtap之間的問題的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

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

在某一次設計中

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

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

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

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

由此我做出判斷

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

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

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

<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>

需要實現(xiàn) 點擊圖片顯示菜單列表點擊每個菜單項觸發(fā)MenuItemOnclick事件并傳遞對應的參數(shù)

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

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

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

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

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

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

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

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

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

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

//視圖層
<view id="outer" bindtap="handleTap1">   //在組件中綁定bindtap事件 函數(shù)handleTap1
 outer view
 <view id="middle" catchtap="handleTap2"> //在組件中綁定catchtap事件 函數(shù)handleTap2
  middle view
  <view id="inner" bindtap="handleTap3"> //在組件中綁定bindtap事件 函數(shù)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") 
  },

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: