微信小程序bindtap 与 catchtap 是使用

news/2025/1/11 14:16:52/

如果写小程序对二者不理解的,那看到这边博客,将很快帮助到您,

个人总结的一句话:,bindtap点击事件在同一个view中会向上冒泡,而catchtap 不会向上冒泡

下面会有一个demo给出解释,

说他们使用的时候先说下微信小程序的事件分类冒泡事件与非冒泡事件

官网上这样规定的

事件分类

事件分为冒泡事件和非冒泡事件:

  1. 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
  2. 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

先写一个demo

<view class="intro">

<view id="outer" bindtap="handleTap1">

outer view

<view id="middle" bindtap="handleTap2">

middle view

<view id="inner" bindtap="handleTap3">

inner view

<view id="inner" bindtap="handleTap4">

inner view1

</view>

</view>

</view>

</view>

</view>

 

给没一个view设置一个bindtap  

在js中打印点击事件

handleTap1:function(){

console.log("=============hly","handleTap1")

},

 

handleTap2: function () {

console.log("=============hly", "handleTap2")

},

 

handleTap3: function () {

console.log("=============hly", "handleTap3")

},

 

handleTap4: function () {

console.log("=============hly", "handleTap4")

},

 

点击inner view1 的时候看下打印

点击inner view的时候再看下打印

点击middle view的时候在此看下打印

也就是说点击的时候它把最外面的几个也打印了 也是冒泡到其他事件,当然这个时候就是想阻止它了

这个时候点击事件就可以设置catchtab了,

现在把第三个设置catchtap

点击innerview1的时候再看下打印

变成了2个,也就是tap3阻止了其向上冒泡, 当然如果把第四个设置catchtap的话 其也会起到阻止的作用,

至此可以发现,bindtap点击事件在同一个view中会向上冒泡,而catchtap 不会向上冒泡


http://www.ppmy.cn/news/611798.html

相关文章

OpenGL 抗锯齿

1.简介 你可以看到&#xff0c;我们只是绘制了一个简单的立方体&#xff0c;你就能注意到它存在锯齿边缘。 可能不是非常明显&#xff0c;但如果你离近仔细观察立方体的边缘&#xff0c;你就应该能够看到锯齿状的图案。如果放大的话&#xff0c;你会看到下面的图案&#xff1a…

KNN算法简介

1&#xff0c;基本概念 邻近算法&#xff0c;或者说K最近邻(kNN&#xff0c;k-NearestNeighbor)分类算法是数据挖掘分类技术中最简单的方法之一。所谓K最近邻&#xff0c;就是k个最近的邻居的意思&#xff0c;说的是每个样本都可以用它最接近的k个邻居来代表。KNN 算法本身简单…

微信小程序scroll-view的使用

这边博客主要是对微信小程序文档的的使用心得 官网地址 demo效果 一些属性 scroll-top 和属性,设置竖向滚动条的位置,就是第一次进来的时候,还没有滑动的时候view的位置 假如不设置默认在第一位置,如果想显示中间的或者其他的位置,就可以使用此属性 scroll-into-view 这个就…

RGB Color Codes Chart

RGB Color Codes Chart RGB颜色空间 RGB颜色空间或RGB颜色系统&#xff0c;从红色、绿色和蓝色的组合中构造所有颜色。 红色、绿色和蓝色各使用8位&#xff0c;它们的整数值从0到255。这使得25625625616777216可能的颜色。 RGB≡红、绿、蓝 LED显示器中的每个像素都是通过…

tomcat与resin的比较

tomcat与resin的比较 - java的涟漪 - CSDN博客https://blog.csdn.net/rogerjava/article/details/7652347 Cauchohttp://caucho.com/ Resin Pro Download | Cauchohttps://caucho.com/products/resin/download转载于:https://www.cnblogs.com/rgqancy/p/10412008.html

线性分类

1&#xff0c;基本概念 在机器学习领域&#xff0c;分类的目标是指将具有相似特征的对象聚集。而一个线性分类器则透过特征的线性组合来做出分类决定&#xff0c;以达到此种目的。对象的特征通常被描述为特征值&#xff0c;而在向量中则描述为特征向量。 2&#xff0c;线性分类…

微信小程序下拉刷新和上拉加载

效果图 微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的 个人感觉特别简单 2 使用scroll-view 实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下 其实就是滑动到顶部和底部的时候请求网络,就行了, 第一种方法说明: 在json里面先声明这个界面要用到刷…

mybatis逆向工程配置文件怎么再偷懒(懒出天际)

使用mybatis逆向工程时&#xff0c;需要在逆向工程配置文件那里指定要对那些表进行逆向工程&#xff0c;如果数据表很多的话&#xff0c;一个一个地写有点麻烦&#xff0c;为什么不自动生成这些XML字段呢 &#xff08;我的需求是&#xff0c;将数据表首字母大写&#xff0c;然后…