微信小程序> 微信小程序绑定事件解析

微信小程序绑定事件解析

浏览量:547 时间: 来源:A狂奔的蜗牛

小程序点击事件有两种bindtap和catchtap,前者不会阻止冒泡事件向上冒泡,后者则可以阻止向上冒泡。

1.事件分类:

 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。 
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

区分bindtap和catchtap示例代码:

  1. <view bindtap="onclick1">  
  2.     onclick1
  3.     <view catchtap="onclick2">onclick2</view>  
  4.     <view bindtap="onclick3">onclick3</view>  
  5. </view>  
  6.   
  7. Page({  
  8.     onclick1:function(e){  //输出结果是:onclick1
  9.       console.log("onclick1")  
  10.     },  
  11.     onclick2: function (e) {  //输出结果是:onclick2
  12.       console.log("onclick2")  
  13.     },  
  14.     onclick3: function (e) {  //输出结果:onclick3  onclick
  15.       console.log("onclick3")  
  16.     },  
  17. })  

2.列表item事件细节处理

一般在相应的Page定义中写上相应的事件处理函数(参数是event),都能满足需求。

但是,当item中view嵌套层级复杂且内层view不需要绑定事件时,点击item拿到对应的id就需要阻止向上冒泡事件。

我们都知道js中阻止冒泡事件方法:e.stopPropagation()

而小程序中微信对js部分高度封装,是没有上面的方法的,那若何才能阻止事件向上冒泡呢?

且看列子:

 <template name="test">    <view bindtap = 'click1' data-postId="{{id}}">
     <view>          <image src='../images/icon_logo.png'></image>      </view>    </view>
  </template>    <block wx:for="{{testData}}" wx:for-item="item" wx:key="pro">    <template is="test" data="{{...item}}"></template>  </block>
page({

 data:{

     testData:[{id:'1',title:'Q'}],

      click1: function(e){          wx.showToast({          // title: e.target.dataset.postid + "",//点到不同view层上,返回值不一样          title: e.currentTarget.dataset.postid + "",        })     }  }})


分别点击外层和里层view时:e.target.dataset.postid结果分别是1和undefined;

分别点击外层和里层view时:e.currentTarget.dataset.postid结果分别是1和1;

微信小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎