E企盈营销工具技术服务商 热线:4006-838-530

微信小程序的事件机制冒泡与非冒泡事件

E企盈直播平台营销卖货系统

在微信小程序中,可以看到同为点击事件,有的是bindtap而有的是catchtap,那么这两者有什么区别呢?为了进一步了解微信小程序的事件机制,在原DEMO的基础上增加了一个简单的页面。效果如下。Paste_Image.png红黄绿分别代表三个view。 红是最外层的, 黄绿依次为中底层。 每一层view对应着一个点击事件。(outtap,midtap,innertap)。Page({  outtap(event){     console.log(“out:”+event);  },   midtap(event){    console.log(“mid:”+event)  },   innertap(event){    console.log(“innertap:”+event)  }})首先先把所有的事件都改为bindtap。分别点击inner层,middle层,out层。再看看日志上打印出来的数据。view id=”out” class=”out” bindtap=”outtap”                out view id=”middle” class=”middle” catchtap=”midtap”                 middle    view id=”inner” class=”inner” bindtap=”innertap”                    inner    /view /view/view点击innertap.png点击midtap.png点击toptap.png可以看到,当为view的点击时间为bindtap的时候, 点击最底层的innerview的时候,除了触发innertap的点击方法之外,事件还会往上进行传递,依次触发midtap和outtap方法。然后我们把middle的bindtap改成catchtap,再分别点击三个视图层。(顺序 inner middle out)点击innertap.png点击midtap.png点击toptap.png可以看到,当mid层使用了catchtap后,事件执行到mid层之后,便不会再往上进行传递。从上面的截出来的图片中, 我们可以看到点击了控件之后,返回的是一个Object对象,那么这个对象里面包含什么信息呢。查看官方文档。Paste_Image.png 其中type为事件类型,timeStamp为事件生成的时间戳,target为触发事件的组件的一些属性值集合,currentTarget当前组件的一些属性值集合,touches为触摸事件,包含的信息为触摸点信息的数组,detail为额外的信息集合。以下为事件的一些详细信息。Paste_Image.pngPaste_Image.pngPaste_Image.png从官方的文档中,我们可以发现,事件分为两种,一种是冒泡事件,另一种是非冒泡事件。a.冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递b.非冒泡事件:当一个组件上的事件被出发后,该事件不会向父节点传递。显然bindtap属于冒泡事件,catchtap属于非冒泡事件。除了bindtap之外,wxml的其他冒泡事件还有以下事件。冒泡事件列表.png注:除上表之外的其他组件自定义事件都是非冒泡事件,如form/的submit事件,input/的input事件,scroll-view/的scroll事件。作者:水山一村链接:https://www.jianshu.com/p/065f7b8bc87b來源:简书简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序的事件机制冒泡与非冒泡事件
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏