首页 > 开发宝典 > 小程序开发

小程序catchtap和bindtap的区别

2020-05-08 15:27:12 ·

前言

在微信小程序的开发过程中我们肯定会遇到时间绑定的问题,这时候我们一般都是采用bandtap或者是catchtap进行事件绑定的。那么他们两个的区别在哪里呢?

一、首先我们要先知道什么是事件

微信官方给出的事件的解释是:

事件是视图层到逻辑层的通讯方式。

事件可以将用户的行为反馈到逻辑层进行处理。

事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。

事件对象可以携带额外信息,如 id, dataset, touches。

那我们如何使用事件呢?


简单来说就是将事件绑定到组件上面,bindtap和catchtap都属于点击事件,绑定了之后点击组件可以触发这个函数。

共同点

  • 在微信小程序的事件机制中,bindtap和catchtap都可以触发一个组件的点击事件,代码如下

  • <!--bindtap-->
  • <view class="parentBox" bindtap="onParentHandler">parentB  <view class="childBox" bindtap="onChildHandler">childB</view></view>
  • <!--catchtap-->
    <view class="parentBox" catchtap="onParentHandler">parentB  <view class="childBox" catchtap="onChildHandler">childB</view></view>
  • Next

区别

  • bindtap

    • XXML代码如下

      <view class="parentBox" bindtap="onParentHandler">parentB  <view class="childBox" bindtap="onChildHandler">childB</view></view>

    • js如下

    • //点击parentB
        onParentHandler:function(){
          console.log("点击parentB");
        },  //点击childB
        onChildHandler: function () {
          console.log("点击childB");
        },
    • 点击父节点parentBox,打印结果如下

    • 点击子节点childBox,打印结果如下

    • Next

    • 测试实例如下

    • 测试结论:bindtap不能阻止事件冒泡

    • Next

  • catchtap

    • XXML代码如下

      <view class="parentBox" catchtap="onParentHandler">parentB  <view class="childBox" catchtap="onChildHandler">childB</view></view>

    • js代码如下


      //点击parentB
        onParentHandler:function(){
          console.log("点击parentB");
        },  //点击childB
        onChildHandler: function () {
          console.log("点击childB");
        },


    • 点击父节点parentBox,打印结果如下

    • 点击子节点childBox,打印结果如下

    • Next

    • 测试实例如下

    • 测试结论:catchtap可以阻止事件冒泡

    • Next

  • Next


说点什么... 共有条评论