微信小程序:冒泡事件及其阻止

事件的类别分为几种：

点击事件：tap

长按事件：longtap

触摸事件：touchstart； touchend；touchcancel；touchmove

其他：input；submit....

其中前三类是冒泡事件，其他的称为非冒泡事件。

写一个简单的例子，代码就不一一贴出来了，WXML的文件如下：

<view class='redview' bindtap='redclick'>红色<view class='yellowview' bindtap='yellowclick'>黄色<view class='blueview' bindtap='blueclick'>蓝色</view></view>
</view>

效果如图：

当我点击最内层的蓝色方框的时候，打印的结果如下：

冒泡事件的机制是先打印点击的蓝色，也就是最内层，然后依次打印第二层和第三层。假设点击黄色层，会依次打印出黄色和红色。点击红色时只打印红色。

但是也可以阻止冒泡事件的发生，其实很简单，直接把bindtap改为catchtap即可。

<view class='redview' bindtap='redclick'>红色<view class='yellowview' bindtap='yellowclick'>黄色<view class='blueview' catchtap='blueclick'>蓝色</view></view>
</view>

这样你点击最内层的蓝色，只会打印蓝色而不会打印出黄色和红色了。但是点击黄色还是会打印黄色和红色，这个时候再把黄色页面的bindtap改成catchtap就可以了。

友情提示：有一部分标签是默认在最上层的，比如video，想在video上放一个view然后设置catchtap将video覆盖是无效的。

转: https://blog.csdn.net/qq_36002582/article/details/78755427

转载于:https://www.cnblogs.com/fps2tao/p/10214049.html

微信小程序:冒泡事件及其阻止相关推荐

微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解
bindtap就是点击事件在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行在后台.js文件中定义 ...
wxml修改样式_微信小程序动态绑定事件并实现事件修改样式
微信小程序动态绑定事件并实现事件修改样式实例代码 wxml {{item.name}} js var reportTypeList = [ { name: "日报1", id: ...
微信小程序 webview 返回按钮阻止返回
一.需求:微信小程序在使用webview 时,导航栏是不允许自己修改的.对于左上角的返回按钮,如果相要在返回的时候,弹框确定后再返回,微信小程序是没有api支持.在微信小程序的思路上基本无解. 二.解 ...
微信小程序-绑定事件以及bindtap和catchtap的区别
前言在微信小程序的开发过程中我们肯定会遇到时间绑定的问题,这时候我们一般都是采用bandtap或者是catchtap进行事件绑定的.那么他们两个的区别在哪里呢? 一.首先我们要先知道什么是事件微信 ...
微信小程序scroll事件/onPageScroll事件的延迟问题
需求在前端开发中,我们经常会遇到一个需求,在页面进行滚动操作的时候,当页面其中的某个元素滚动到某个位置,我们就让该元素停留在该位置.等到滚动小于某个值的时候,再让该元素继续随着页面滚动.这就是我们平 ...
微信小程序 - 绑定事件 bindtap（包括是否传入参数）
小程序绑定事件的方式有很多种,这里我只对bindtap的绑定方式进行介绍,其他的绑定方式也是差不多这样的. 1.不带参数的绑定方式 index.wxml文件中:share表示绑定的事件名称 < ...
WeChat applet 微信小程序(3) 事件绑定
WeChat applet 事件绑定概述事件是视图层到逻辑层的通讯方式,事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定到组件,当用户在视图层触发该组件的事件时,就会执行逻辑层中对应的事件 ...
微信小程序 bindtap事件与catchtap事件
大家好,最近一直在研究小程序开发,当对控件绑定事件的时候,发现 bindtap 和catchtap都可以触发事件,然而点击单个按钮,这两个方法都可以实现事件触发,实现页面跳转功能等等,那么他俩到底有 ...
微信小程序页面事件 - 下拉刷新与上拉触底
一.下拉刷新 1.概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为. 2. 启用下拉刷新启用下拉刷新有两种方式: ①全局开启下拉刷新在 app.j ...

微信小程序:冒泡事件及其阻止

微信小程序:冒泡事件及其阻止相关推荐

最新文章

热门文章