微信小程序——事件冒泡
在微信小程序的事件分为冒泡事件和非冒泡事件:
- 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
- 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
WXML的冒泡事件列表:
类型 | 触发条件 | 最低版本 |
---|---|---|
touchstart | 手指触摸动作开始 | |
touchmove | 手指触摸后移动 | |
touchcancel | 手指触摸动作被打断,如来电提醒,弹窗 | |
touchend | 手指触摸动作结束 | |
tap | 手指触摸后马上离开 | |
longpress | 手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发 | 1.5.0 |
longtap | 手指触摸后,超过350ms再离开(推荐使用longpress事件代替) | |
transitionend | 会在 WXSS transition 或 wx.createAnimation 动画结束后触发 | |
animationstart | 会在一个 WXSS animation 动画开始时触发 | |
animationiteration | 会在一个 WXSS animation 一次迭代结束时触发 | |
animationend | 会在一个 WXSS animation 动画完成时触发 | |
touchforcechange | 在支持 3D Touch 的 iPhone 设备,重按时会触发 | 1.9.90 |
注:除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件,如 form 的submit
事件,input 的input
事件,scroll-view 的scroll
事件,(详见各个组件)
事件绑定
bindtap和catchtap都属于点击事件,绑定了之后点击组件可以触发这个函数;
以bind
或catch
开头,然后跟上事件的类型,如bindtap
、catchtouchstart
。自基础库版本 1.5.0 起,在非原生组件中,bind
和catch
后可以紧跟一个冒号,其含义不变,如bind:tap
、catch:touchstart
。
bind系列事件绑定不会阻止冒泡事件向上冒泡,但是catch系列事件绑定可以阻止冒泡事件向上冒泡。
事件冒泡的条件:父元素与子元素绑定同一类事件并且子元素的绑定方式是bind(catch开头会阻止事件冒泡),代码如下:
<view id="outter" bindtap="tap1">
outer view
<view id="middle" bindtap="tap2">
middle view
<view id="inner" bindtap="tap3">
inner view
</view>
</view>
</view>
点击id为inner的元素,同时也触发了id为middle和outter的元素
把inner的bindtap改成catchtap就会阻止事件冒泡
微信小程序——事件冒泡的更多相关文章
- 微信小程序--阻止冒泡事件
微信小程序事件的使用方式 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数. <view id="tapTest ...
- 微信小程序事件
微信小程序事件1.什么是事件2.事件类别3.事件冒泡4.事件绑定5.事件对象详解笔记:1.事件是一种用户的行为,是一种通讯方式.2.事件类别: 点击事件:tap 长按事件:longtap ...
- 微信小程序事件始末及相关资料整理
转载请注明来源:前端之巅 微信公众号 小道消息 昨晚(9月21日晚)10:51,冯大辉在他的知名微信公众号小道消息上发了一篇7字标题的文章<微信应用号来了>,并加了"微信是一个操 ...
- 微信小程序 - 事件 | 传递 | 冒泡
事件 常见的事件有: 类型 触发条件 最低版本 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断,如来电提醒,弹窗 t ...
- 微信小程序~事件绑定和冒泡
[1]事件绑定和冒泡 事件绑定的写法同组件的属性,以 key.value 的形式. key 以bind或catch开头,然后跟上事件的类型,如bindtap.catchtouchstart.自基础库版 ...
- 微信小程序 事件绑定 bind和catch 区别
转自:https://blog.csdn.net/xiaoqiang_0719/article/details/79729592 本文以冒泡事件tap(手指触摸后马上离开,也就是点击事件)为例子来区别 ...
- 微信小程序事件绑定
一 通过实例来认识 (一) 给出代码 我们直接通过一个实例来引入我们想要讲解的内容: <input type="text" bindinput="handleInp ...
- 微信小程序 --- 事件绑定
事件类别: tap:点击事件: longtap:长按事件: touchstart:触摸开始: touchend:触摸结束: touchcansce:取消触摸: 事件绑定: bind绑定: catch绑 ...
- 微信小程序 事件
事件详解 事件分类 事件分为冒泡事件和非冒泡事件: 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递. 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递. WXML的冒泡事件列 ...
随机推荐
- 关于Ubuntu10.04磁盘空间不足的问题
最近由于项目问题,需要自己写驱动,但是驱动知识太少,开始下了个内核自己玩玩,没想到的是内核下好了,Ubuntu待机后却登录不了了,重启了好几次也不行,而且颜色是蓝色,右上角还提示:Install pr ...
- CSPS模拟 75
我身边 mikufun:矩阵树学学学 Lrefrain:矩阵题刷刷刷 Dybala:神仙定理康康康 skyh:讨论讨论讨论(most mei face) DeepinC:我过样例了! Mouding: ...
- Linux上的文件管理类命令都有哪些,其常用的使用方法及其相关示例演示
目录管理命令ls:列出指定目录下的内容格式: ls [OPTION]... [FILE]... -a:显示所有文件包括隐藏文件 -A:显示除.和..之外的所有文件 -l,--long:显示 ...
- Android 4.2 获取应用缓存接口变化
PackageManager.getPackageSizeInfo(String packageName, IPackageStatsObserver observer)不可用,改为PackageMa ...
- 原生JS实现双向链表
1.前言 双向链表和单向链表的区别在于,在链表中,一个节点只有链向下一个节点的链接,而在双向链表中,链接是双向的:一个链向下一个元素,另一个链向前一个元素,如下图所示: 从图中可以看到,双向链表中,在 ...
- [转载]2.2 UiPath条件判断活动Flow Decision的介绍和使用
一.Flow Decision介绍 FlowDecision节点是一个条件节点,它根据指定条件是否成立来控制流程的两个分支. 当条件为True时,流程执行一个分支 当条件为False时,流程执行另外一 ...
- linux 设置固定ip和dns
目录 1. centos 1.1 ifconfig 查看网卡名称 1.2 设置固定ip和dns 1.3 重启网络 2. ubuntu 2.1 ifconfig 查看网卡名称 2.2 设置固定ip和dn ...
- Resource Path Location Type Target runtime Apache Tomcat v6.0 is not defined(项目报错)已解决
我换了开发工具后,导入的项目不是这里报错就是那里不错.不过,我喜欢.在tomcat里面部署项目后,定位到报错行时,总是提示我这句话:Description Resource Path Location ...
- jvm与程序的生命周期
yls 2019/11/5 java虚拟机结束生命周期的情况: 执行了System.exit(); 程序正常运行结束 程序在执行过程中遇到异常或错误而异常终止 由于操作系统出现错误而导致jvm进程终止 ...
- 阿里云ECS服务器部署HADOOP集群(三):ZooKeeper 完全分布式集群搭建
本篇将在阿里云ECS服务器部署HADOOP集群(一):Hadoop完全分布式集群环境搭建的基础上搭建,多添加了一个 datanode 节点 . 1 节点环境介绍: 1.1 环境介绍: 服务器:三台阿里 ...