（三）小程序 bindtap 和 catchtap

最新推荐文章于 2024-07-13 18:55:09 发布
最新推荐文章于 2024-07-13 18:55:09 发布
阅读量373 收藏
点赞数
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Luckyzhoufangbing/article/details/107860790
版权

区别：bindtap 有事件冒泡 catchtap 没有事件冒泡

（1）bindtap

<view hover-class="import" bindtap="getTarget">
      parent
      <view bindtap="getTarget">children</view>
    </view>

点击子元素，会触发自己以及父元素的点击事件 事件冒泡

（2）catchtap

点击子元素，仅仅会触发自己的点击事件 无事件冒泡

<view hover-class="import" bindtap="getTarget">
      parent
      <view catchtap="getTarget">children</view>
    </view>

luckybing~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序 事件传参
撑戌圆爱痒生
07-26 835
微信小程序 事件传参wxml部分js 部分 wxml部分 1.先绑定事件 2.在该元素上写上属性 data-index 3.参数值即为要传参数 <text catchtap="del" data-index="item" class="del">删除</text> js 部分 以下两种方法都可以拿到值,好奇的小伙伴可以打印下e看看呢~ // 删除 del:function(e){ console.log(e.currentTarget.dataset.index);
微信小程序页面路由跳转传参和获取值
July_win的博客
04-16 1373
1.catchtap点击事件（与bindtap相比 可阻止冒泡） data-id 是你要传递的参数和值 <view class="goods" wx:for='{{goodsList}}' wx:key="ORDER_CODE" catchtap="toGoodsDetail" data-id="{{item.ID}}"> 2.点击事件通过e（event）来获取传递的值 ---微信小程序js文件 toGoodsDetail(e){ // console.log(e); var
微信小程序带参数跳转页面
jiaomongjun的博客
04-02 194
跳转前页面前端代码 <view catchtap="toChild" id="1" ></view> 在js中定义触发跳转方法 toChild(e) { console.log(e.target.id) //打印id的值 wx.navigateTo({ //跳转页面的url url: '/pages/component' + e.currentTarget.dataset.url+"?id="+e.target.i
bindtap和catchtap的区别？
最新发布
FENGZXCjjjjj的博客
07-13 591
换句话说，当一个元素上的bindtap事件被触发时，如果该元素的父节点也有相同类型的bindtap事件，父节点的事件处理函数也会被执行；用途：在一般情况下，推荐使用bindtap来进行事件绑定，因为它可以与父元素的事件一起工作，并且在处理冒泡事件时更加灵活。一般情况下，推荐使用bindtap来进行事件绑定，因为它可以与父元素的事件一起工作，并且在处理冒泡事件时更加灵活。bindtap可以通过返回false阻止默认行为的触发，而catchtap无法阻止具有默认行为的元素的触发。
小程序的点击事件bindtap和catchtap区别
wanan1215的博客
03-16 2025
(1) 事件是视图层到逻辑层的通讯方式。(2) 事件可以将用户的行为反馈到逻辑层进行处理。(3) 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。(4) 事件对象可以携带额外信息，如 id,dataset,touches。
bindtap和catchtap的区别
柠檬不萌只是酸i
05-30 2万+
（1）介绍事件： bindtap 和 catchtap 都属于点击事件，绑定之后，点击组件是可以触发这个函数的。 bindtap ：子元素使用bindtap绑定事件后，执行的时候，会冒泡到父元素（触发父元素上绑定的bingtap事件） catchtap ：不会冒泡到父元素上，阻止事件冒泡 （2）如何使用该事件： .wxml 页面写入： <view> &lt...
微信小程序bindtap事件与冒泡阻止详解
10-16
总的来说，理解`bindtap`事件和冒泡机制对于构建微信小程序的交互逻辑至关重要。正确地使用`bindtap`和`catchtap`可以帮助开发者精确控制事件的处理流程，提升用户体验。同时，合理利用`event`对象提供的信息，可以...
微信小程序视图控件与bindtap之间的问题的解决
10-17
总结来说，解决微信小程序中视图控件`<view>`与`bindtap`事件的问题，需要理解事件冒泡和捕获的概念，以及它们在微信小程序中的具体表现。适当使用`catchtap`可以阻止事件冒泡，而创建额外的遮罩层可以帮助控制事件...
bindtap点击无响应-zindex.rar
12-28
总的来说，解决`bindtap`点击无响应的问题通常需要深入理解CSS的定位和层叠上下文，并结合小程序的事件机制进行排查。通过调整元素的`z-index`，优化布局，或者更换事件类型，我们通常能够修复这类问题，使得用户...
微信小程序 1111111111111111111111111
10-26
4. 事件处理：小程序使用 bindtap 和 catchtap 指令来处理事件，而 Vue.js 使用 v-on 指令。 小程序的开发需要注意以下几点： 1. 注册 app() 方法 2. 使用 Page 方法来指定页面的初始数据和生命周期 3. 使用 JSON ...
微信小程序 事件的绑定和传参
weixin_41040445的博客
03-05 3256
绑定事件 官网文档 小程序中使用bind关键字绑定事件，常见事件 tap 并且很多组件都有自己对应的一些事件，比如 input组件的 bindinput radio-group组件中的bindchange bindtap index.wxml index.js <view bindtap="add">点击我</view> Page({ data: { message:"helloWord", num:'even', }, add:funct..
微信小程序-绑定事件以及bindtap和catchtap的区别
weixin_41975655的博客
09-27 3万+
前言 在微信小程序的开发过程中我们肯定会遇到时间绑定的问题，这时候我们一般都是采用bandtap或者是catchtap进行事件绑定的。那么他们两个的区别在哪里呢？ 一、首先我们要先知道什么是事件 微信官方给出的事件的解释是： 事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。 事件对象可以携...
小程序bindtap 和 catchtap 的区别以及如何使用
TianXuab的博客
09-26 4518
在小程序开发中，我们经常会遇到需要给用户提供交互性的功能，比如点击按钮、滑动页面等。为了实现这些交互，小程序提供了两种常用的事件处理方式：bindtap 和 catchtap。本文将介绍这两种事件处理方式的区别，并提供详细的代码示例。
微信小程序bindtap与catchtap的区别
小屁孩大帅-保密的博客
06-07 6895
1、什么是事件 　　(1)事件是视图层到逻辑层的通讯方式。 　　(2)事件可以将用户的行为反馈到逻辑层进行处理。 　　(3)事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。 　　(4)事件对象可以携带额外信息，如 id,dataset,touches 2、如何使用事件 　　(1)简单来说就是将事件绑定到组件上面，bindtap和catchtap都属于点击事件，绑定了之后点击组件可以触发这个函数。 　　(2)函数tapName会接受一个参数event，eve...
JS事件
Ulrica_Amaris的博客
09-07 543
事件 1.事件就是交互事件，用户点击实现回馈，是交互体验的核心功能。 绑定事件 1.ele.onxxxx = function(event){} 兼容性很好，但是一个元素的同一事件上只能绑定一个 基本等同于写在HTML行间上。 2.obj.addEventListener(type, listener, options) IE9以上，可以为一个事件绑定多个处理程序。 3.obj.attachEvent(‘on’ + type, fn（事件处理函数）)； IE独有，一个事件同样可以绑定多个处理程序 解除事件
微信小程序 bindtap与catchtap的事件使用和区别
qq_37916164的博客
05-27 3614
1、什么是事件 (1)事件是视图层到逻辑层的通讯方式。 　　(2)事件可以将用户的行为反馈到逻辑层进行处理。 　　(3)事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。 　　(4)事件对象可以携带额外信息，如 id,dataset,touches 2、如何使用事件 　　(1)简单来说就是将事件绑定到组件上面，bindtap和catchtap都属于点击事件，绑定了之后点击组件可以触发这个函数。 　　(2)函数tapName会接受一个参数e...
微信小程序bindtap与catchtap的区别详解【阻止view里层事件执行导致外层view事件也执行】
番茄Salad
02-28 882
【代码】微信小程序bindtap与catchtap的区别详解【阻止view里层事件执行导致外层view事件也执行】
微信小程序之事件（bindtap和catchtap）
热门推荐
路在脚下，幸福在手中，莫贪！！！！！
01-08 11万+
微信小程序之事件（bindtap和catchtap） 微信小程序的事件请参考：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html。在这里不必啰嗦。 我们都知道bindtap和catchtap都是当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。但是bind事件绑定不会阻止冒泡事件
支付宝、微信小程序高频知识（汇总VS对比）
流星雨的博客
04-28 852
汇聚支付宝、微信小程序多年开发经验，包括css样式隔离、小程序modal弹窗滚动穿透等，解决了很多这种大家都没解决的问题，以及对这两种常开发的小程序多了一些对比。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值