AI 助理
备案控制台
开发者社区 云计算 文章 正文

微信小程序系列——你知道什么是事件传播以及怎么防止吗？

2023-08-30 152
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 微信小程序系列——你知道什么是事件传播以及怎么防止吗？

先赞后看，此生必赚

一、什么是事件传播？

如图，蓝色区域是红色区域的子元素；

点击子元素的时候，触发父元素的点击事件就是事件传播；

二、如何防止事件传播

这时候，可以使用catchTap来绑定点击事件：

1. <view class='father' catchtap='ontapFather'>
2. <view class='child' catchtap='ontapChild'></view>
3. </view>


文章标签：
小程序
关键词：
微信事件
微信小程序事件
微信传播
前方一片光明
目录
相关文章
天玄TX
|
6月前
|
小程序 UED 开发者
小程序如何监听页面的滚动事件
小程序如何监听页面的滚动事件
天玄TX
228 0
朝阳39
|
4月前
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项，动态列表-步骤条（含事件传参），动态详情（含微信云查询单条数据 doc）
【微信小程序-原生开发】实用教程09 - 可滚动选项，动态列表-步骤条（含事件传参），动态详情（含微信云查询单条数据 doc）
朝阳39
85 0
杀死一只知更鸟debug
|
2月前
|
小程序 JavaScript
微信小程序学习之数据绑定，事件绑定，事件传参与数据同步的学习记录
本文介绍了微信小程序中的数据绑定、事件绑定、事件传参与数据同步的基本概念和使用方法，包括如何在data对象中定义数据、使用mustache语法在wxml中渲染数据、绑定和处理事件、事件对象属性、事件传参以及实现输入框与data数据的同步。
杀死一只知更鸟debug
29 0
微信小程序学习之数据绑定，事件绑定，事件传参与数据同步的学习记录
杀死一只知更鸟debug
|
2月前
|
JSON 小程序 JavaScript
微信小程序页面事件，下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件，包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件，以及监听上拉触底事件和配置上拉触底的距离。
杀死一只知更鸟debug
160 0
广州爱奇迪-伍华聪
|
4月前
|
开发框架 前端开发 JavaScript
在微信框架模块中，基于Vue&Element前端的事件和内容的管理
在微信框架模块中，基于Vue&Element前端的事件和内容的管理
广州爱奇迪-伍华聪
54 1
爱你三千遍斯塔克
|
4月前
|
JavaScript
支付系统---微信支付23-数据绑定和事件，使用Vue调试要添加扩展,F12与console平级就出现了Vue，在支付资料，微信支付，04资料，工具里
支付系统---微信支付23-数据绑定和事件，使用Vue调试要添加扩展,F12与console平级就出现了Vue，在支付资料，微信支付，04资料，工具里
爱你三千遍斯塔克
37 0
我是夜阑的狗
|
6月前
|
小程序
【微信小程序】-- 页面事件 - 上拉触底 - 案例（二十七）
【微信小程序】-- 页面事件 - 上拉触底 - 案例（二十七）
我是夜阑的狗
200 0
我是夜阑的狗
|
6月前
|
JSON 小程序 JavaScript
【微信小程序】-- 页面事件 - 上拉触底（二十六）
【微信小程序】-- 页面事件 - 上拉触底（二十六）
我是夜阑的狗
319 0
我是夜阑的狗
|
6月前
|
JSON 小程序 JavaScript
【微信小程序】-- 页面事件 - 下拉刷新（二十五）
【微信小程序】-- 页面事件 - 下拉刷新（二十五）
我是夜阑的狗
163 0
邹荣乐
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
邹荣乐
537 7

热门文章

最新文章

  • 1
    微信 6.5.1 for iOS发布 可以在朋友圈分享相册中的视频
  • 2
    iOS版微信新技能：可直接向PC端传文件
  • 3
    微信查询高考分数已支持20个城市
  • 4
    微信公众平台可通过UnionID机制在多公众号间帐号互通
  • 5
    微信支付文章综合
  • 6
    C# 企业微信消息推送对接
  • 7
    微信小视频微信卡包功能如约现身6.0版本
  • 8
    微信消息回复C#
  • 9
    微信公众平台开发(102) 模板消息
  • 10
    nginx反向代理与微信测试全攻略
  • 1
    微信小程序用户登陆和获取用户信息功能实现
    120
  • 2
    uniapp-微信小程序-上拉和下拉触底刷新
    147
  • 3
    微信小程序和springboot实现微信支付
    231
  • 4
    微信小程序-微信支付
    70
  • 5
    微信小程序调试、断点调试
    185
  • 6
    微信小程序-分包
    68
  • 7
    开发uniapp过程中对app、微信小程序与h5的webview调试
    1148
  • 8
    微信小程序echart图片不显示 问题解决
    62
  • 9
    UniApp与微信小程序介绍及区别
    588
  • 10
    微信小程序开发工具的使用，各个配置文件详解，小程序开发快速入门（二）
    563

    • 相关课程

    更多
  • IoT小程序框架课程

    • 相关电子书

    更多
  • 微信移动客户端-数据存储优化实践
  • 微信广告引擎与播放节奏算法实践
  • 微信H5视频播放器在海量业务下的实践

    • 相关实验场景

    更多
  • 1分钟SAE部署PHP商城小程序
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • EMAS Serverless搭建《私人云相册》小程序
  • 基于小程序Serverless开发个人相册小程序
    • 下一篇
    无影云桌面