• 微信小程序——事件冒泡,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就会阻止事件冒泡

  • 相关阅读:
    【POJ】1067 取石子游戏(博弈论)
    【POJ】2348 Euclid's Game(扩欧)
    【POJ】1061 青蛙的约会 / 【BZOJ】1477(扩欧)
    【POJ】3090 Visible Lattice Points(欧拉函数)
    【BZOJ】2190 [SDOI2008]仪仗队(欧拉函数)
    【POJ】2115 C Looooops(扩欧)
    【BZOJ】1015 [JSOI2008]星球大战starwar(并查集+离线处理)
    [BZOJ4822][Cqoi2017]老C的任务
    [BZOJ1001][BeiJing2006]狼抓兔子
    [BZOJ1188][HNOI2007]分裂游戏
  • 原文地址:https://www.cnblogs.com/bushui/p/11593735.html
Copyright © 2020-2023  润新知