小程序onclick的写法,微信小程序绑定事件解析

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


1.事件分类:


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

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


区分bindtap和catchtap示例代码:


   <view bindtap="onclick1">  

       onclick1

       <view catchtap="onclick2">onclick2</view>  

       <view bindtap="onclick3">onclick3</view>  

   </view>  

     

   Page({  

       onclick1:function(e){  //输出结果是:onclick1

         console.log("onclick1")  

       },  

       onclick2: function (e) {  //输出结果是:onclick2

         console.log("onclick2")  

       },  

       onclick3: function (e) {  //输出结果:onclick3  onclick1

         console.log("onclick3")  

       },  

   })  

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;

添加回复:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。