100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 微信小程序 -事件(bindtap与catchtap的区别)

微信小程序 -事件(bindtap与catchtap的区别)

时间:2023-11-26 17:03:39

相关推荐

微信小程序 -事件(bindtap与catchtap的区别)

参考官方文档https://developers./miniprogram/dev/framework/view/wxml/event.html

bindtap和catchtap都是当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡:

​//视图层<view id="outer" bindtap="handleTap1">//在组件中绑定bindtap事件 函数handleTap1outer view<view id="middle" catchtap="handleTap2"> //在组件中绑定catchtap事件 函数handleTap2middle view<view id="inner" bindtap="handleTap3"> //在组件中绑定bindtap事件 函数handleTap3inner view</view></view></view>//逻辑层Page({handleTap1:function(event){ //点击handleTap1输出 outer view bindtap console.log("outer view bindtap") },handleTap2: function (event) { //点击handleTap2输出 middle view catchtapconsole.log("middle view catchtap") },handleTap3: function (event) { //点击handleTap3输出 inner view bindtap middle view catchtap console.log("inner view bindtap") }, ​

​//视图层<view id="outer" bindtap="handleTap1"> //在组件中绑定bindtap事件 函数handleTap1。outer view<view id="middle" bindtap="handleTap2"> //在组件中绑定bindtap事件 函数handleTap2。middle view<view id="inner" bindtap="handleTap3"> //在组件中绑定bindtap事件 函数handleTap3。inner view</view></view></view>//逻辑层Page({handleTap1:function(event){ //点击handleTap1输出 outer view bindtapconsole.log("outer view bindtap")},handleTap2: function (event) { //点击handleTap2输出 middle view bindtap outer view bindtapconsole.log("middle view bindtap")},handleTap3: function (event) { //点击handleTap3输出 inner view bindtap middle view bindtap outer view bindtap console.log("inner view bindtap")},})​

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。