网站排名影响因素,长春平原网站建设,上海城乡建设和住房建设官网,wordpress 主题 mirana在微信小程序中#xff0c;事件分为 冒泡事件 和 非冒泡事件 #xff1a;
冒泡事件#xff1a;当一个组件的事件被触发后#xff0c;该事件会向父节点传递#xff1b;#xff08;如果父节点中也绑定了一个事件#xff0c;父节点事件也会被触发#xff0c;也就是说子组…在微信小程序中事件分为 冒泡事件 和 非冒泡事件
冒泡事件当一个组件的事件被触发后该事件会向父节点传递如果父节点中也绑定了一个事件父节点事件也会被触发也就是说子组件的事件和父组件的事件都会被触发
非冒泡事件当一个组件的事件被触发后该事件不会向父节点传递如果父节点绑定了事件父节点的事件不会被触发只有组件本身的事件会触发
在微信小程序中使用 bind 绑定的事件会触发事件冒泡如果想阻止事件冒泡可以使用 catch 来绑定事件
下面使用微信开发者工具来演示一下在基于上一节的内容下进行演示在 pages/cate/cate.wxml 中添加以下代码
view classcatch bind:tapparentHandlerbutton bind:tapbtnHandler按钮/button
/view在 pages/cate/cate.scss 中添加以下样式代码
.catch {display: flex;height: 300rpx;background-color: skyblue;align-items: center;
}在 pages/cate/cate.js 中添加以下函数
Page({parentHandler(){console.log(父组件绑定的事件)},btnHandler(){console.log(子组件触发的事件)}
})编写完毕后点击重新编译点击页面的按钮可以看到子组件和父组件绑定的事件都触发了如下 如果想实现点击子组件按钮的时候只触发子组件的事件父组件的事件不触发则需要阻止子组件的事件冒泡如果想阻止子组件的事件冒泡就需要更改一下绑定事件的方式我们需要把子组件绑定事件的方式从 bind:tap 修改为 catch:tap如下
view classcatch bind:tapparentHandlerbutton catch:tapbtnHandler按钮/button
/view重新运行点击按钮可以发现父组件的事件没有触发如下 参考视频尚硅谷微信小程序开发教程
