zoukankan      html  css  js  c++  java
  • 微信小程序bindtap与catchtap的区别

    1、什么是事件

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

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

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

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

    2、如何使用事件

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

      (2) 函数tapName会接受一个参数event,event里面存储了一些函数调用的上下文信息

      (3) 标签元素

    <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

      (4) 绑定事件

    Page({ 
        tapName: function(event) { 
            console.log(event) 
        } 
    }) 

    3、bindtap和catchtap的区别

      (1) 相同点:首先他们都是作为点击事件函数,就是点击时触发。在这个作用上他们是一样的,可以不做区分。

      (2) 不同点:他们的不同点主要是bindtap是冒泡的,catchtap是非冒泡的。

    4、小程序中事件分为冒泡事件和非冒泡事件。

      (1) 本文以冒泡事件tap(手指触摸后马上离开,也就是点击事件)为例子来区别bind和catch事件

      (2) bindtap? 事件绑定不会阻止冒泡事件向上冒泡

      (3) catchtap? 事件绑定可以阻止冒泡事件向上冒泡

    5、例子

    1、假如有三个view点击事件都是用的bindtap,三个view是层级包含关系?

    <view id="outer" bindtap="out">
        outer view
        <view id="middle" bindtap="middle">
            middle view
            <view id="inner" bindtap="inner">
                inner view
            </view>
        </view>
    </view>

    2、我么在js里代码是在相对应的事件打印出log,代码如下?

    out:function(e){
        console.log("--out bindtap click")
    }, middle: function (e) {
        console.log("--middle bindtap click")
    }, inner: function (e) {
        console.log("--inner bindtap click")
    }

    3、bindtap执行结果

      点击out view打印出一条log --> out bindtap click

      点击middle view打印出两条log --> middle bindtap click--out bindtap click

      点击innew view打印出三条log --> inner bindtap click--middle bindtap click--out bindtap click

      可以看出bindtap不阻止向上冒泡,所以点击inner一直冒泡到了最外层。

    4、如果我们只修改middle view的bindtap为catchtap

      点击out view打印出一条log --> out bindtap click(因为没有上层元素故而无法向上冒泡)

      点击middle view打印出一条log --> middle bindtap click(catchtap阻止向上冒泡)

      点击innew view打印出两条log --> inner bindtap click--middle bindtap click(catchtap阻止向上冒泡)

  • 相关阅读:
    PAT 解题报告 1009. Product of Polynomials (25)
    PAT 解题报告 1007. Maximum Subsequence Sum (25)
    PAT 解题报告 1003. Emergency (25)
    PAT 解题报告 1004. Counting Leaves (30)
    【转】DataSource高级应用
    tomcat下jndi配置
    java中DriverManager跟DataSource获取getConnection有什么不同?
    理解JDBC和JNDI
    JDBC
    Dive into python 实例学python (2) —— 自省,apihelper
  • 原文地址:https://www.cnblogs.com/eline2018/p/10394974.html
Copyright © 2011-2022 走看看