小程序------(事件绑定:冒泡和捕获)阻止事件冒泡事件

1.事件冒泡

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

1.key 以bind或catch开头,然后跟上事件的类型,如bindtap、catchtouchstart。自基础库版本 1.5.0 起,在非原生组件中,bind和catch后可以紧跟一个冒号,其含义不变,如bind:tap、catch:touchstart。

2.value 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

bind事件绑定不会阻止事件冒泡向上冒泡;

catch事件绑定可以阻止事件冒泡向上冒泡;

类型	触发条件	最低版本
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 设备,重按时会触发

catchtap、catch + 事件名 。。。。。

2.事件捕获

  1. 自基础库版本 1.5.0 起,触摸类事件支持捕获阶段。
  2. 捕获阶段位于冒泡阶段之前,即指即使点击最里面事件,也会从文档顶部依次从外到内触发捕获函数,之后再触发函数冒泡
  3. 采用capture-bindcapture-catch关键字,后者将中断捕获阶段和取消冒泡阶段。

capture-bindcapture-catch关键字

官方例子:

在下面的代码中,点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。


  outer view
  
    inner view
  



================================================================================
如果将上面代码中的第一个capture-bind改为capture-catch,将只触发handleTap2。


  outer view
  
    inner view
  

 

你可能感兴趣的:(知识点总结,微信小程序)