微信小程序中冒泡事件怎么实现(微信小程序,编程语言)

时间:2024-04-28 00:07:49 作者 : 石家庄SEO 分类 : 编程语言
  • TAG :

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

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

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

WXML的冒泡事件列表:

类型触发条件最低版本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 设备,重按时会触发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开头会阻止事件冒泡),代码如下:

<viewid="outter"bindtap="tap1">outerview<viewid="middle"bindtap="tap2">middleview<viewid="inner"bindtap="tap3">innerview</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就会阻止事件冒泡

微信小程序中冒泡事件怎么实现

 </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:微信小程序中冒泡事件怎么实现的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:微信小程序中自定义tabbar custom-tab-bar 6s出不来如何解决下一篇:

18 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18