微信小程序 冒泡事件原理解析


Posted in Javascript onSeptember 27, 2019

在微信小程序的事件分为冒泡事件和非冒泡事件:

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

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

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事件,(详见各个组件)

事件绑定

以bind或catch开头,然后跟上事件的类型,如bindtap、catchtouchstart。自基础库版本 1.5.0 起,在非原生组件中,bind和catch后可以紧跟一个冒号,其含义不变,如bind:tap、catch:touchstart。

事件冒泡的条件:父元素与子元素绑定同一类事件并且子元素的绑定方式是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>

tap1: function (e) {
console.log(1, e)
},
tap2: function (e) {

console.log(2, e)
},
tap3: function (e) {

console.log(3, e)
},

点击id为inner的元素,同时也触发了id为middle和outter的元素

微信小程序 冒泡事件原理解析

把inner的bindtap改成catchtap就会阻止事件冒泡

微信小程序 冒泡事件原理解析

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
JS 事件绑定函数代码
Apr 28 Javascript
javascript里模拟sleep(两种实现方式)
Jan 25 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
javascript中数组的定义及使用实例
Jan 21 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
Angular.js自动化测试之protractor详解
Jul 07 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
JavaScript实现背景自动切换小案例
Sep 27 #Javascript
vue监听用户输入和点击功能
Sep 27 #Javascript
vue实现文字加密功能
Sep 27 #Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 #Javascript
vue实现购物车小案例
Sep 27 #Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 #Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 #Javascript
You might like
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
javascript hashtable实现代码
2009/10/13 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
Windows下为Python安装Matplotlib模块
2015/11/06 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
90后毕业生的求职信范文
2013/09/21 职场文书
人事部主管岗位职责
2013/12/26 职场文书
教育科研先进个人材料
2014/01/26 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
环境卫生倡议书
2014/08/29 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
冰峪沟导游词
2015/02/09 职场文书
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server