微信小程序 （事件对象---绑定、冒泡、捕获）

最新推荐文章于 2024-06-28 14:19:20 发布
最新推荐文章于 2024-06-28 14:19:20 发布
阅读量552 收藏
点赞数
文章标签： 微信小程序 （事件对象---绑定、冒泡、捕获）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45343878/article/details/100522707
版权
本文介绍了微信小程序中事件的工作原理，包括原生组件的事件冒泡现象，currentTarget和target的区别，事件对象的属性如changeTouches、currentTarget、target、detail和touches，以及如何阻止冒泡和实现事件捕获。详细阐述了事件绑定、冒泡过程和捕获阶段的顺序，以及在实际应用中的注意事项。
摘要由CSDN通过智能技术生成

原生组件
小程序中的部分组件是由客户端创建的原生组件，包含：
camera 相机
canvas 画布
input（仅在focus时表现为原生组件） 输入框
map 地图
textarea 多行输入框
video 视频

事件冒泡
事件触发验证：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
点击父元素红色区域时，只会触发父级绑定的事件
在这里插入图片描述
点击子元素橙色区域
currentTarget和target有区别
target两次都是son
currentTarget第一次是son，第二次是parent
target

最低0.47元/天 解锁文章
weixin_45343878
关注
微信小程序 - 子组件触发父组件函数（triggerEvent）
王佳斌
02-17 8341
前言 类似 Vue 中 this.$emit()，子组件可执行父组件的函数方法。 在小程序里，组件间通信与传统 Vue 有所区别，但只不过是语法上。 解决方案 官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html 其实官方文档已介绍 this.triggerEvent 与其参数，下面是更加易于理解的例子。 子组件（help）： <view bindtap="on
微信小程序事件处理的艺术：捕获与阻止冒泡的深入实践【代码示例】
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-09 1134
掌握微信小程序的事件捕获和阻止冒泡机制，你已经为创造流畅的用户交互打下了坚实基础。但每个项目都有其独特性，你是否遇到过特殊场景下的事件处理挑战？如何在复杂的组件结构中高效管理事件流？欢迎在评论区分享你的见解和疑问，让我们共同探讨，让小程序的事件管理更加得心应手。是否考虑过在小程序中实现更复杂的事件代理模式？对于大规模应用，你有哪些独到的性能优化建议？期待你的声音，让我们一同进步。欢迎来到我的博客，很高兴能够在这里和您见面！
微信小程序的事件冒泡和捕获
拾柒唸的博客
10-24 1744
微信小程序的事件冒泡和捕获事件冒泡阻止事件冒泡事件捕获中断事件捕获 事件冒泡 当一个组件上的事件被触发后，该事件会向父节点传递。 bind事件名 eventBind.wxss .one{ width: 300px; height: 300px; background: #96c24e; } .two{ width: 200px; height: 200px; background-color: #bec936; } .three{ width: 1
微信小程序常用的事件
最新发布
qq_74472152的博客
06-28 1166
在微信小程序中，可以通过自定义事件来实现组件之间的通信，或者在页面中实现不同部分之间的交互。自定义事件可以通过触发，也可以通过bind和catch来监听和捕获自定义事件。以下是自定义事件的基本使用方法：1.触发自定义事件：在组件中使用方法触发自定义事件，可以传递参数给事件处理函数。// 在组件中触发自定义事件2.监听自定义事件：在组件或页面中使用bind来监听自定义事件，然后在对应的事件处理函数中处理逻辑。-- 在组件或页面中监听自定义事件 -->// 在组件或页面中定义自定义事件的处理函数。
小程序中的冒泡事件与捕获事件
weixin_30835933的博客
04-27 414
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2...
微信小程序开发中的事件捕获和冒泡
zebghfv的博客
07-07 953
微信小程序中的事件捕获和冒泡 学习微信小程序原生开发，记录一下，防止忘记。 事件捕获：事件触发的过程是从外层的容器一层一层的向目标元素触发。 事件冒泡：事件的触发从里层依次向最外层传递。 如图： 代码： capture-bind:tap这个属性是监听事件捕获的。 bindtap属性是监听事件冒泡的。 当点击最里层的view3的时候，打印结果如图： 先事件捕获：从最外层的click1事件触发，捕获到最里面，然后再从最里面冒泡到最外面。 这就是事件的捕获和冒泡。 在开发过程中，为了解决事件的冒泡或者捕获，怎
微信小程序中data-key属性之数据传输(经验总结)
10-14
首先，`data-key` 是微信小程序提供的一个特性，它允许开发者在 WXML（微信小程序的结构层语言）中设置自定义数据，并在JS（业务逻辑层）中通过事件回调来访问这些数据。例如，`data-key="{{...}}"` 通常用来获取和...
微信小程序（事件对象-绑定、冒泡、捕获）
weixin_45626442的博客
11-30 459
原生组件 原生组件 小程序中的部分组件是由客户端创建的原生组件，包含： ①camera ②canvas ③input（仅在focus时表现为原生组件） ④map ⑤textarea ⑥video 事件冒泡 事件触发验证 事件冒泡验证 点击子级蓝色区域 点击父级红色区域 target和currentTarget 属性的区别： event.target返回触发事件的元素 event.curren...
微信小程序--------原生组件、事件对象（绑定、冒泡、捕获）
weixin_44775723的博客
09-03 1871
一、原生组件 小程序中的部分组件是由客户端创建的原生组件，包含： ①camera—相机 ②canvas—画布 ③input（仅在focus时表现为原生组件） ④map—地图 ⑤textarea—多行输入框 ⑥video—视频 二、事件冒泡 <view id="parent" bindtap="fj"> <view id="child" bindtap="zj"><...
微信小程序（事件对象---绑定、冒泡、捕获）
weixin_45343973的博客
09-03 948
原生组件 小程序中的部分组件是由客户客户端创建的原生组件，包含： camera canvas input（仅在focus时表现为原生组件） map textarea video 事件冒泡： <view id="parent" bind:tap="parentFn"> <view id="child" bind:tap="childFn"></view> ...
微信小程序开发基础之八：冒泡事件
steventian72的博客
11-17 413
冒泡事件 在微信小程序开发中，子组会把捕获的事件向上传递给父组件，这叫冒泡，例如： <!-- index.wxml--> <view id="father" catchtap="fatherViewTap"> <view id="child" bindtap="childViewTap">子组件</view> </view> //i...
微信小程序 笔记 （杂）
射手男很懒的博客
12-19 206
微信小程序  笔记 （杂）   刚入小程序不久，写写笔记。     事件分类 事件分为冒泡事件和非冒泡事件： 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。 WXML的冒泡事件列表： 类型 触发条件 最低版本 touchstart 手指触摸动作开始   touchmove...
点击子元素却也触发父元素的点击事件
热门推荐
我的博客
02-24 2万+
在前端开发时，经常出现父元素有点击事件，子元素也有点击事件，在点击子元素时却会把父元素的点击事件也触发，这种情况叫做事件冒泡，解决的方案有很多种，这里记录一下比较常用，比较好用的一种解决方案 HTML 代码   父元素 &lt;div id="father" style="width:600px;height:400px;border:1px solid black;"&gt;&lt;...
IE浏览器，点击子元素不触发子元素的click事件，而是触发父元素的click事件（button子元素的click事件无法触发）
xd_yangxiaoromg的博客
12-03 1696
&lt;button class="radioContent" v-if="scope.row.audioclipUrl" @click="showAudio(scope.$index,scope.row)"&gt;&lt;span&gt;查看&lt;/span&gt; &lt;div class="radio" :data-index="scope.
uniapp 微信小程序video标签点击触发父标签的事件
m0_70798249的博客
09-12 763
该问题是因为事件冒泡，但是video标签的播放按钮是标签自带的，不方便我们阻止事件的传播，我的思路：在video标签外再套一层盒子，在该盒子上组织事件的传播。uniapp使用不是很多再此记录方便下次使用。从网上看了很多案例，但都解决不了我的问题。在uniapp中，可以通过添加。属性来阻止事件冒泡。
微信小程序的事件对象属性，事件绑定
xj1216wt的博客
05-26 366
微信小程序的事件对象属性，事件绑定
微信小程序全集
03-29
本课程对微信小程序开发做了详细的分析与讲解，由浅入深地带你搞定从0基础到入门所需的所有相关知识与技能。主要课程模块包括微信小程序开发背景介绍与基础知识、开发进阶、UI设计与开发、API的使用与详解、认证注册小程序等BAT大神带你由浅入深地搞定从《0基础到高级》所需的所有相关微信小程序开发知识与技能。
微信小程序触控事件详解：从入门到实战
在微信小程序的开发过程中，触控事件是一项至关重要的技能，它允许开发者与用户交互并响应用户的触摸动作。本文档是微信小程序入门系列的第四部分，主要讲解了触控事件的基础概念和实际应用。 首先，事件在小程序中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值