当前位置: 代码迷 >> 综合 >> 微信小程序视图控件与bindtap之间的问题的解决
  详细解决方案

微信小程序视图控件与bindtap之间的问题的解决

热度:12   发布时间:2024-01-24 14:38:50.0

在微信小程序中 最常用的<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>

微信小程序bindtap与catchtap的区别详解

bindtap和catchtap都是当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡:

//视图层
<view id="outer" bindtap="handleTap1">   //在组件中绑定bindtap事件 函数handleTap1outer view<view id="middle" catchtap="handleTap2"> //在组件中绑定catchtap事件 函数handleTap2middle view<view id="inner" bindtap="handleTap3"> //在组件中绑定bindtap事件 函数handleTap3inner view</view></view>
</view>//逻辑层
Page({handleTap1:function(event){  //点击handleTap1输出 outer view bindtap  console.log("outer view bindtap") },handleTap2: function (event) { //点击handleTap2输出 middle view catchtapconsole.log("middle view catchtap") },handleTap3: function (event) { //点击handleTap3输出 inner view bindtap middle view catchtap console.log("inner view bindtap") },