微信小程序 冒泡事件原理解析

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

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

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

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事件,(详见各个组件)

事件绑定

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

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

<view bindtap="tap1"> outer view <view bindtap="tap2"> middle view <view 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就会阻止事件冒泡

微信小程序 冒泡事件原理解析

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/5a3faed78abe6d5bc12ac7881fda6332.html