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

    1、bindtap和catchtap的区别

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

    2、例子

    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(catchtap阻止向上冒泡)
  • 相关阅读:
    CSS 之 @media
    How to fix “Duplicate sources.list entry …” issue
    shell脚本加不加export的区别
    过滤部分错误信息,不输出到stderr
    /dev/null 2>&1 解释(转)
    crontab与环境变量
    PHP实现斐波那契数列非递归方法
    有反斜杠时候,CakePHP往pgsql插入数据异常
    PHP输出图片文件,实现浏览器缓存机制
    sudo: unable to resolve host XXX 解决方法
  • 原文地址:https://www.cnblogs.com/liubingyjui/p/12808398.html
Copyright © 2011-2022 走看看