介绍
这篇文章主要介绍微信小程序中冒泡事件的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
在微信小程序的事件分为冒泡事件和非冒泡事件:
冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
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就会阻止事件冒泡
以上是“微信小程序中冒泡事件的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!