zoukankan      html  css  js  c++  java
  • 小程序冒泡解决

    事件类型

    事件分为冒泡事件和非冒泡事件:

    • 冒泡事件:以关键字 on 为前缀,当组件上的事件被触发,该事件会向父节点传递。

    • 非冒泡事件:以关键字 catch 为前缀,当组件上的事件被触发,该事件不会向父节点传递。

    事件绑定的写法同组件的属性,以 key、value 的形式。

    • key 以 on 或 catch 开头,然后跟上事件的类型,如 onTapcatchTap

    • value 是一个字符串,对应 Page 中定义的函数名,不存在时触发事件会报错。

    <view id="outter" onTap="handleTap1">
      view1
      <view id="middle" catchTap="handleTap2">
        view2
        <view id="inner" onTap="handleTap3">
          view3
        </view>
      </view>
    </view>
    View Code
    <view id="outter" onTap="handleTap1">
      view1
      <view id="middle" catchTap="handleTap2">
        view2
        <view id="inner" onTap="handleTap3">
          view3
        </view>
      </view>
    </view>
    

    上面代码中,点击 view3 会先后触发 handleTap3 和 handleTap2(因为 tap 事件会冒泡到 view2,而 view2 阻止了 tap 事件冒泡,不再向父节点传递),点击 view2 会触发 handleTap2,点击 view1 会触发 handleTap1。

    所有会发生冒泡的事件:

    类型 触发条件
    touchStart 触摸动作开始
    touchMove 触摸后移动
    touchEnd 触摸动作结束
    touchCancel 触摸动作被打断,如来电提醒,弹窗
    tap 触摸后马上离开
    longTap 触摸后,超过500ms再离开

    常见问题

    Q:大 box 的事件覆盖了小 box 的事件,点击小 box 也执行了大 box 的事件怎么解决?

    A:推荐使用关键字为 catch 前缀的非冒泡事件来阻止事件冒泡,请参见 非冒泡事件

    官方摘抄:https://opendocs.alipay.com/mini/framework/events

  • 相关阅读:
    正则表达式
    Requests库基本使用(转载)
    prometheus + grafana + pushgateway 搭建监控可视化系统
    Docker的系统资源限制(转载)
    DAY8 文件操作
    DAY7 集合,深浅copy
    DAY6 Python之代码块,小数据池的详解
    DAY5 Python基础类型之字典
    DAY4 Python数据类型之列表
    DAY3 python基础之数据类型总览
  • 原文地址:https://www.cnblogs.com/lin137/p/12842694.html
Copyright © 2011-2022 走看看