微信小程序中冒泡事件的示例分析

  介绍

这篇文章主要介绍微信小程序中冒泡事件的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

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

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

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

WXML的冒泡事件列表:

类型触发条件最低版本touchstart手指触摸动作开始,touchmove手指触摸后移动,touchcancel手指触摸动作被打断,如来电提醒,弹窗,touchend手指触摸动作结束,利用手指触摸后马上离开,longpress手指触摸后,超过350 ms再离开,如果指定了事件回调函数并触发了这个事件,利用事件将不被触发1.5.0longtap手指触摸后,超过350 ms再离开(推荐使用longpress事件代替),transitionend会在wxs过渡或天气。createAnimation动画结束后触发,animationstart会在一个wxs动画动画开始时触发,animationiteration会在一个wxs动画一次迭代结束时触发,animationend会在一个wxs动画动画完成时触发,touchforcechange在支持3 d触摸的iPhone设备,重按时会触发1.9.90

注:除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件,如表单的提交事件,输入的事件,滚动视图的滚动事件,(详见各个组件)

<强>事件绑定

以绑定或赶开的头,然后跟上事件的类型,如bindtap, catchtouchstart。自基础库版本1.5.0起,在非原生组件中,绑定和捕获后可以紧跟一个冒号,其含义不变,如绑定:点击,捕捉:touchstart。

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

& lt; view  id=皁utter", bindtap=皌ap1"比;   outer 才能视图   & lt;才能view  id=癿iddle", bindtap=皌ap2"比;   ,,middle 视图   ,,& lt; view  id=癷nner", bindtap=皌ap3"比;   ,,,inner 视图   ,,& lt;/view>   & lt;才能/view>   & lt;/view>      tap1: function  (e), {   console.log (1, e)   },   tap2: function  (e), {   console.log (2, e)   },   tap3: function  (e), {   console.log (3, e)   },

点击id为内部的元素,同时也触发了id为中间和出的元素

微信小程序中冒泡事件的示例分析

把内心的bindtap改成catchtap就会阻止事件冒泡

微信小程序中冒泡事件的示例分析

以上是“微信小程序中冒泡事件的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!

微信小程序中冒泡事件的示例分析