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

最新推荐文章于 2023-09-12 19:09:56 发布
最新推荐文章于 2023-09-12 19:09:56 发布
阅读量513 收藏
点赞数
文章标签： 微信小程序 （事件对象---绑定、冒泡、捕获）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45343878/article/details/100522707
版权

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

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

最低0.47元/天 解锁文章
weixin_45343878
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序事件处理的艺术：捕获与阻止冒泡的深入实践【代码示例】
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-09 1051
掌握微信小程序的事件捕获和阻止冒泡机制，你已经为创造流畅的用户交互打下了坚实基础。但每个项目都有其独特性，你是否遇到过特殊场景下的事件处理挑战？如何在复杂的组件结构中高效管理事件流？欢迎在评论区分享你的见解和疑问，让我们共同探讨，让小程序的事件管理更加得心应手。是否考虑过在小程序中实现更复杂的事件代理模式？对于大规模应用，你有哪些独到的性能优化建议？期待你的声音，让我们一同进步。欢迎来到我的博客，很高兴能够在这里和您见面！
微信小程序子元素使用父元素id
qq_42927764的博客
02-21 1170
自己学，想了个笨方法，子元素和父元素都添加绑定事件。当点击子元素时，会先调用子元素，再调用父元素的点击，利用data可实现在父元素中判断实现两个功能。 也算是两个按钮实现各自的功能，并使用同一个id wxml <view class="toolbar" bindtap="ceshi" id="ceshiid"> <view bindtap="ceshi1">提交名字</view> <view bindt
点击子元素却也触发父元素的点击事件
热门推荐
我的博客
02-24 2万+
在前端开发时，经常出现父元素有点击事件，子元素也有点击事件，在点击子元素时却会把父元素的点击事件也触发，这种情况叫做事件冒泡，解决的方案有很多种，这里记录一下比较常用，比较好用的一种解决方案 HTML 代码   父元素 &lt;div id="father" style="width:600px;height:400px;border:1px solid black;"&gt;&lt;...
微信小程序（事件对象-绑定、冒泡、捕获）
weixin_45343884的博客
09-03 881
拓展： 原生组件 小程序中的部分组件是由客户端创建的原生组件，包含： ①camera ②canvas ③input（仅在focus时表现为原生组件） ④map ⑤textarea ⑥video 一·事件冒泡 ①事件触发验证 <view id="parent" bindtap="parentFn"> <view id="child" bindtap="childFn">&...
js事件传播的两种机制
a1498665771的博客
02-07 487
js事件的两种传播机制
IE浏览器，点击子元素不触发子元素的click事件，而是触发父元素的click事件（button子元素的click事件无法触发）
xd_yangxiaoromg的博客
12-03 1669
&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.
微信小程序（事件对象---绑定、冒泡、捕获）
weixin_45343973的博客
09-03 916
原生组件 小程序中的部分组件是由客户客户端创建的原生组件，包含： camera canvas input（仅在focus时表现为原生组件） map textarea video 事件冒泡： <view id="parent" bind:tap="parentFn"> <view id="child" bind:tap="childFn"></view> ...
微信小程序中data-key属性之数据传输(经验总结)
10-14
首先，`data-key` 是微信小程序提供的一个特性，它允许开发者在 WXML（微信小程序的结构层语言）中设置自定义数据，并在JS（业务逻辑层）中通过事件回调来访问这些数据。例如，`data-key="{{...}}"` 通常用来获取和...
微信小程序事件流原理解析
10-15
微信小程序事件流原理解析是理解小程序中用户交互机制的关键。事件是视图层与逻辑层之间通信的桥梁，使得用户在界面上的操作能够被逻辑层捕获并处理。通过事件，开发者可以响应用户的点击、滑动等行为，实现丰富的...
微信小程序事件对象中e.target和e.currentTarget的区别详解
11-28
事件对象（Event Object）是小程序中用于传递事件信息的关键，其中的`e.target`和`e.currentTarget`属性尤其重要，它们可以帮助开发者精确地理解事件触发的位置和行为。下面我们将深入探讨这两个属性的区别。 1. `e...
微信小程序 教程之事件
11-28
【微信小程序事件详解】 在微信小程序开发中，事件扮演着至关重要的角色，它连接着视图层和逻辑层，使得...在实际开发中，灵活运用事件绑定和事件对象，可以解决许多常见的交互问题，提升小程序的可玩性和功能丰富度。
微信小程序开发基础之八：冒泡事件
steventian72的博客
11-17 402
冒泡事件 在微信小程序开发中，子组会把捕获的事件向上传递给父组件，这叫冒泡，例如： <!-- index.wxml--> <view id="father" catchtap="fatherViewTap"> <view id="child" bindtap="childViewTap">子组件</view> </view> //i...
uniapp 微信小程序video标签点击触发父标签的事件
m0_70798249的博客
09-12 689
该问题是因为事件冒泡，但是video标签的播放按钮是标签自带的，不方便我们阻止事件的传播，我的思路：在video标签外再套一层盒子，在该盒子上组织事件的传播。uniapp使用不是很多再此记录方便下次使用。从网上看了很多案例，但都解决不了我的问题。在uniapp中，可以通过添加。属性来阻止事件冒泡。
微信小程序 - 子组件触发父组件函数（triggerEvent）
王佳斌
02-17 7738
前言 类似 Vue 中 this.$emit()，子组件可执行父组件的函数方法。 在小程序里，组件间通信与传统 Vue 有所区别，但只不过是语法上。 解决方案 官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html 其实官方文档已介绍 this.triggerEvent 与其参数，下面是更加易于理解的例子。 子组件（help）： <view bindtap="on
微信小程序 笔记 （杂）
射手男很懒的博客
12-19 196
微信小程序  笔记 （杂）   刚入小程序不久，写写笔记。     事件分类 事件分为冒泡事件和非冒泡事件： 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。 WXML的冒泡事件列表： 类型 触发条件 最低版本 touchstart 手指触摸动作开始   touchmove...
【微信小程序】子组件触发在父页面的点击事件
CNSamRol的博客
01-18 911
点击事件，如果子组件要通过点击事件来触发。时，可以在子组件中用。
微信小程序的事件冒泡和捕获
拾柒唸的博客
10-24 1703
微信小程序的事件冒泡和捕获事件冒泡阻止事件冒泡事件捕获中断事件捕获 事件冒泡 当一个组件上的事件被触发后，该事件会向父节点传递。 bind事件名 eventBind.wxss .one{ width: 300px; height: 300px; background: #96c24e; } .two{ width: 200px; height: 200px; background-color: #bec936; } .three{ width: 1
微信小程序刷新ec-canva
最新发布
12-03
微信小程序的刷新指的是在页面中的ec-canva组件中更新数据。ec-canva是微信小程序中用于展示echarts图表的组件，可以通过刷新来实时更新图表的数据和样式。 首先，我们需要在小程序页面的json文件中引入ec-canva组件，并在wxml文件中声明ec-canva的标签。 然后，在小程序页面的js文件中定义一个用于刷新数据的函数，可以通过调用这个函数来实现刷新ec-canva图表。 在刷新函数中，我们可以通过获取ec-canva组件的实例对象，然后使用实例对象的setOption方法来更新图表的数据和样式。setOption方法接受一个对象参数，包含了需要更新的数据和样式信息。 最后，在需要刷新图表的时候，可以在小程序页面的其他逻辑中调用刷新函数来实现刷新ec-canva图表。 总之，通过在小程序页面中引入ec-canva组件，在刷新函数中通过获取组件实例对象并使用setOption方法来更新图表的数据和样式，我们可以轻松地实现微信小程序中ec-canva图表的刷新。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值