参考官方文档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")},})