zoukankan      html  css  js  c++  java
  • 微信小程序——事件冒泡,catch和bind的区别

    在微信小程序的事件分为冒泡事件和非冒泡事件:

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

    WXML的冒泡事件列表:

    类型触发条件最低版本
    touchstart 手指触摸动作开始  
    touchmove 手指触摸后移动  
    touchcancel 手指触摸动作被打断,如来电提醒,弹窗  
    touchend 手指触摸动作结束  
    tap 手指触摸后马上离开  
    longpress 手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发 1.5.0
    longtap 手指触摸后,超过350ms再离开(推荐使用longpress事件代替)  
    transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发  
    animationstart 会在一个 WXSS animation 动画开始时触发  
    animationiteration 会在一个 WXSS animation 一次迭代结束时触发  
    animationend 会在一个 WXSS animation 动画完成时触发  
    touchforcechange 在支持 3D Touch 的 iPhone 设备,重按时会触发 1.9.90

    注:除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件,如 form 的submit事件,input 的input事件,scroll-view 的scroll事件,(详见各个组件)

    事件绑定

    bindtap和catchtap都属于点击事件,绑定了之后点击组件可以触发这个函数;

    bindcatch开头,然后跟上事件的类型,如bindtapcatchtouchstart。自基础库版本 1.5.0 起,在非原生组件中,bindcatch后可以紧跟一个冒号,其含义不变,如bind:tapcatch:touchstart

    bind系列事件绑定不会阻止冒泡事件向上冒泡,但是catch系列事件绑定可以阻止冒泡事件向上冒泡。

    事件冒泡的条件:父元素与子元素绑定同一类事件并且子元素的绑定方式是bind(catch开头会阻止事件冒泡),代码如下:

    <view id="outter" bindtap="tap1">
       outer view
       <view id="middle" bindtap="tap2">
         middle view
         <view id="inner" bindtap="tap3">
           inner view
          </view>
       </view>
    </view>

    tap1: function (e) {
      console.log(1, e)
    },
    tap2: function (e) {
      console.log(2, e)
    },
    tap3: function (e) {
      console.log(3, e)
    },

    点击id为inner的元素,同时也触发了id为middle和outter的元素

    把inner的bindtap改成catchtap就会阻止事件冒泡

  • 相关阅读:
    装饰者模式和适配器模式
    java 中获得 资源文件方法
    在windows 上统计git 代码量
    Linux-静态库生成
    Redis-Redi事务注意事项
    Linux-使用 yum 升级 gcc 到 4.8
    Linux-配置虚拟IP
    PHP-PSR-[0-4]代码规范
    Linux-/etc/rc.local 或 service 中使用 sudo -u xxx cmd 执行失败(sorry, you must have a tty to run sudo)解决办法
    Linux-系统负载
  • 原文地址:https://www.cnblogs.com/bushui/p/11593735.html
Copyright © 2011-2022 走看看