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

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

浏览量:700 时间: 来源:COCOLI_BK

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.0longtap手指触摸后,超过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。view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2"  outer view  view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4"    inner view  /view/view================================================================================如果将上面代码中的第一个capture-bind改为capture-catch,将只触发handleTap2。view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2"  outer view  view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4"    inner view  /view/view

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎