快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

由此我做出判斷

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

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

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

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

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

然后當(dāng)在<view class="menu-list">標(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)擊事件由<image>傳遞到了外層的<view> 因而觸發(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ì)在該頁面對應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)。

bind事件綁定不會(huì)阻止冒泡事件向上冒泡，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){  
  //點(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") 
  },

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

您可能感興趣的文章: