微信小程序之事件绑定冒泡

最新推荐文章于 2022-07-09 06:20:52 发布
原创 最新推荐文章于 2022-07-09 06:20:52 发布 · 1.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解析了在前端开发中事件绑定的两种格式：bind和catch，以及它们如何影响事件的冒泡过程。通过具体实例说明了不同绑定方式下，事件触发的顺序和效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

事件绑定格式：

bind+evnetType

catch+eventType

假如存在三个view盒子，分别为outer(bindtap=""),middle(catchtap),inner(bindtap);

1：当点击inner盒子的时候，inner,middle盒子绑定的函数会依次执行，

而outer盒子绑定的函数将不会执行，因为在middle盒子上绑定的事件类型是以catch开头的，

将会阻止冒泡事件的进行，从而不会执行outer盒子绑定的函数；

2：当点击middle盒子的时候，仅有middle盒子绑定的函数会执行，因为middle盒子绑定的事件类型是以

catch开头的，会去取消冒泡阶段；

3：当点击inner盒子的时候，仅有outer盒子绑定的函数会执行，因为outer盒子绑定的事件类型是以

bind开头的，而且outer盒子位于最外层，由于冒泡是从内到外进行的，所以仅有outer盒子绑定的函数会执行；

微信小程序阻止自定义事件冒泡
m0_69876298的博客
12-25 284
微信小程序阻止事件冒泡，适用自定义事件当前catchtap失效
【微信小程序】事件分类以及阻止事件冒泡
云泽野の编程日记
06-09 2032
当一个组件上的事件被触发后，不仅当前组件会接收到这个事件，其父级组件也会按顺序接收到这个事件，直到事件被消耗或到达最外层。在微信小程序中，事件分为冒泡事件和非冒泡事件两大类，它们的区别在于事件是否能从原始触发组件开始，向父级组件传播（即“冒泡”）。：非冒泡事件触发时，仅当前组件会接收到该事件，不会向上传播到父组件。这类事件在触发后立即停止，不会影响到其他层级的组件。⭐使用 bind 绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用 catch 来绑定事件。要想阻止事件冒泡也很简单,
微信小程序 动态绑定事件并实现事件修改样式
08-30
主要介绍了微信小程序 动态绑定事件并实现事件修改样式的相关资料,需要的朋友可以参考下
解决小程序中绑定事件的冒泡问题
oXiangZuoZuo12345的博客
09-13 611
将bindtap 改成catchtap
微信小程序 --- 事件绑定
weixin_30508309的博客
04-22 304
事件类别： tap：点击事件； longtap：长按事件； touchstart：触摸开始； touchend：触摸结束； touchcansce：取消触摸； 事件绑定： bind绑定； catch绑定；（能阻止事件冒泡） 在冒泡的事件中： currentTarget 和 target是不一致的； currentTarget是我们绑定了的组件，target是发生事件的组件；...
微信小程序——事件委托
weixin_45890771的博客
01-21 1918
事件委托 1. 什么是事件委托 将子元素的事件委托(绑定)给父元素2. 事件委托的好处 1）. 减少绑定的次数 2）. 后期新添加的元素也可以享用之前委托的事件3. 事件委托的原理 冒泡4. 触发事件的是谁 子元素5. 如何找到触发事件的对象 event.target6. currentTarget VS target currentTarget是绑定事件处理函数的元素，target是实际被鼠标点击得到的元素 1）. currentTarget要求...
小程序3——路由、事件流、事件绑定和冒泡
Lucifer的博客
04-19 443
小程序3——路由、事件流、事件绑定和冒泡一、路由方式二、事件流三、事件绑定和冒泡四、事件的捕获阶段 官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/wx.switchTab.html 一、路由方式 Tab切换 二、事件流 官方文档：https://developers.weixin.qq.com/miniprogram/d...
微信小程序bindtap事件与冒泡阻止详解
10-16
为了阻止事件冒泡，微信小程序提供了`catchtap`事件。将`bindtap`替换为`catchtap`，可以确保事件只在当前组件中处理，不会继续向上冒泡。如下所示： ```html outer middle <view bindtap='handinner'>inner ...
微信小程序双击事件，事件冒泡,bangtap,catchtap事件绑定
03-29
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。 事件分类 touchstart 手指触摸 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断，如弹窗和来电提醒 touchend 手
小程序中的事件委托
m0_49159526的博客
07-28 2366
wxml中 <view bindtap="parent"> <view data-name="child1">child1</view> <view data-name="child2">child2</view> </view> js中 parent(e) { console.log(e) if(e.target.dataset.name == 'child1') { console.log('点击的是
Button添加事件委托问题
08-31
Button添加事件委托问题Button添加事件委托问题
事件委托（vue/微信小程序）
优快云haoheng的博客
12-17 461
什么是事件委托    1） 将子元素的事件委托(bind绑定)给父元素 事件委托的好处    1） 减少绑定的次数    2）后期新添加的元素也可以享用之前委托的事件 事件委托的原理    1）冒泡 触发事件的是谁    1） 子元素 如何找到触发事件的对象    1）event.target currentTarget VS target    1） current.
小程序 / 事件
zhumizhumi的博客
10-28 427
1.什么是事件 （1）事件是视图层—逻辑层的通讯方式 （2）事件可以将用户的行为反馈到逻辑层进行处理 （3）事件可以绑定在组件上，当达到触发事件的时候，就会执行逻辑层中对应的事件处理函数 （4）事件对象可以携带额外信息，如 id，dataset，touches 2.bindtap一般使用 就是类似于JS中的click事件，vue中的@click事件 <view id="tap...
微信小程序 03 数据劫持代理和事件绑定
小哞^同^学的技术博客
07-09 815
利用 Object.defineProperty 就能做到 数据双向绑定。描述符对象是一种玩法和限制。configurable:表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，默认值为true。enumerable：表示能否通过for in循环访问属性，默认值为truewritable：表示能否修改属性的值。默认值为true。value：包含这个属性的数据值。默认值为undefined。 这里的 set(){} 如果 里面 写的 是 _this.i
关于小程序的数据劫持代理和事件绑定
sdfsd342w35r的博客
06-09 1176
一.什么是数据劫持 数据劫持，指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。 较为典型的有 vue2.0 的 Object.defineProperty() ,和 vue3.0 的 Proxy 对象. // 模拟 vue 数据绑定 let data = { username: 'jiwang', age: 20 } ​ // 模拟组件实例 let _this = { // 如何让_this 代理得到 data 中的数...
JS事件代理与委托
BeMount
07-12 192
最近在写小程序时遇到js的事件委托，突然感觉自己的JS基础是弱爆了,就在这里分享一下一篇JS的文章 [click here](https://www.cnblogs.com/owenChen/archive/2013/02/18/2915521.html） ...
微信小程序学习5：小程序语法-事件绑定之给事件传递参数
集电极
08-09 632
微信小程序学习5：小程序语法-事件绑定之给事件传递参数 前面一讲是关于事件绑定的，下面对事件绑定进行补充。 在用户触发事件，比如点击按钮时，我们往往要传递一下参数用来识别是那个按钮，因为一个界面往往不止一个按钮控件。 还有，我们也可能要实时收集一下界面信息，所以也需要传递参数。 官方文档：<https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html> 示例代码 xxx.wxml文件：创建一个按钮控件，绑定了ca
小程序路由跳转携带参数方法（直接跳转、事件委托跳转）
woijdknijdfueuijkdjf的博客
09-19 384
一、跳转事件绑定在当前点击的元素上 1.定义data-myName(myName为自定义的需要携带的参数名称) 2.绑定的函数中，event对象中currentTarget包含传递的自定义信息。 二、跳转事件绑定在父元素上（即事件委托） 1.在发生点击事件的子元素上写入属性data-xxxx; 2.跳转事件中接收event对象，传入的自定义data-xxxx在event.target.data...
微信小程序阻止事件冒泡
qq_39131699的博客
04-01 128
可用： <view catchtap="{{false}}"></view> <view catchtap></view> 不可用： <view catchtap=""></view>
微信小程序函数事件绑定
最新发布
04-03
<think>好的，用户想了解如何在微信小程序中进行函数事件绑定，并需要示例教程。首先，我需要回忆微信小程序的官方文档和相关引用内容。根据提供的引用，特别是引用[4]提到小程序使用bind或catch来绑定事件，代替传统的on和click，比如用tap事件。引用[3]指出不能直接在绑定事件时传参，需要用data-属性，然后在事件对象中获取。 首先，我应该分步骤说明基本语法，比如bindtap和catchtap的区别，bind会冒泡，catch阻止冒泡。然后给出一个简单的点击事件示例，比如点击按钮改变文字内容。这部分需要包括wxml中的绑定和js中的处理函数。 接着，用户可能需要知道如何传递参数，这时候要提到data-属性的使用，在事件处理函数中通过event.currentTarget.dataset来获取参数。比如在wxml中设置data-id，然后在js中获取这个id的值。 然后，表单输入的例子也很重要，比如输入框的bindinput事件，实时获取输入内容，并更新到页面的数据中，显示出来。这样用户可以看到双向绑定的效果。 还需要注意引用中的内容，引用[3]提到不能直接传参，所以必须通过data-属性来实现。引用[4]强调使用bind或catch，以及事件名的正确写法，比如bindtap而不是onclick。 最后，确保示例代码正确，语法符合要求，比如使用{{}}绑定数据，在js的Page中定义函数。同时，要提到相关的注意事项，比如事件冒泡和参数传递的限制，以帮助用户避免常见错误。 总结下来，回答的结构应该是：基本语法、点击事件示例、参数传递示例、输入事件示例，然后加上注意事项和相关问题。这样用户就能逐步了解如何进行事件绑定，并应用到实际开发中。</think>### 微信小程序函数事件绑定教程 #### 一、事件绑定基本语法 微信小程序通过`bind`或`catch`前缀绑定事件，语法格式为： 1. `bind:事件名="函数名"` 2. `bind事件名="函数名"`（简写形式） 例如点击事件对应`bindtap`或`bind:tap`[^4]。 --- #### 二、点击事件绑定示例 **WXML文件代码** ```html <button bindtap="handleClick">点击触发事件</button> <text>{{message}}</text> ``` **JS文件代码** ```javascript Page({ data: { message: "初始状态" }, handleClick: function() { this.setData({ message: "按钮被点击了！" }); } }); ``` *实现效果：点击按钮后文本内容变化*[^1][^4]。 --- #### 三、事件参数传递 小程序无法直接在绑定事件时传参，需通过`data-*`自定义属性实现： **WXML文件代码** ```html <button bindtap="handleParam" data-id="123">传递参数</button> ``` **JS文件代码** ```javascript Page({ handleParam: function(event) { const id = event.currentTarget.dataset.id; // 获取data-id的值 console.log("接收参数:", id); // 输出: 123 } }); ``` *注意：参数通过`event.currentTarget.dataset`对象获取*[^3][^4]。 --- #### 四、输入框事件绑定 **WXML文件代码** ```html <input bindinput="handleInput" placeholder="输入内容" /> <text>输入内容：{{inputValue}}</text> ``` **JS文件代码** ```javascript Page({ data: { inputValue: "" }, handleInput: function(event) { this.setData({ inputValue: event.detail.value // 实时更新输入内容 }); } }); ``` *实现效果：输入内容实时同步显示*[^2]。 --- #### 五、注意事项 1. 使用`catch`前缀可阻止事件冒泡（如`catchtap`） 2. 事件名需遵循小程序规范（如滚动用`bindscroll`，长按用`bindlongpress`） 3. 页面跳转等异步操作需在函数内使用`wx.navigateTo`等API。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值