微信小程序 冒泡事件原理解析
在微信小程序的事件分为冒泡事件和非冒泡事件:
冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
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就会阻止事件冒泡
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
微信小程序冒泡事件及其阻止方法实例分析
本文实例讲述了微信小程序冒泡事件及其阻止方法.分享给大家供大家参考,具体如下: 事件的类别分为几种: 点击事件:tap 长按事件:longtap 触摸事件:touchstart: touchend:touchcancel:touchmove 其他:input:submit.... 其中前三类是冒泡事件,其他的称为非冒泡事件. 写一个简单的例子,代码就不一一贴出来了,WXML的文件如下: <view class='redview' bindtap='redclick'> 红色 <view
-
微信小程序 页面跳转事件绑定的实例详解
微信小程序 页面跳转事件绑定的实例详解 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, dataset, touches. 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数 <view bindtap="view"> <text bindtap
-
微信小程序 动态绑定数据及动态事件处理
微信小程序 动态绑定数据及动态事件处理 关键核心代码 <image class="midimage" data-Type="{{item.Type}}" data-BillCode="{{item.BillCode}}" data-src="{{item.imgurl}}" src="{{item.imgurl}}" mode="scaleToFill" bindtap="
-
微信小程序 实现拖拽事件监听实例详解
微信小程序 拖拽监听功能: 在软件开发或者 APP应用开发的时候,经常会遇到拖拽监听,最近自己学习微信小程序的知识,就想实现这样的拖拽效果,这里就记录下. 需要做个浮在scroll-view之上的button.尝试了一下. 上GIF: Android中也会有类似移动控件的操作.思路差不多.获取到位移的X Y 的变量,给控件设置坐标. 1.index.wxml ../images/gundong.png" bindtap="ballClickEvent" style="
-
微信小程序之绑定点击事件实例详解
微信小程序之绑定点击事件实例详解 微信小程序出来那么久了,趁着有时间自己研究一下,前阶段看一了一下,但是不允许个人注册,现在已经对个人开放了,所以爱好者们可以自己研究了. 首先,我们看一下如何添加底部的标签栏:在app.json里操作 { "pages":[ //在这里添加页面的路径 "pages/index/index", "pages/logs/logs", "pages/home/home" ], "windo
-
微信小程序 页面滑动事件的实例详解
微信小程序--页面滑动事件 wxml: <view id="id" class = "ball" bindtap = "handletap" bindtouchstart = "handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend" style = "width : 10
-
微信小程序bindtap事件与冒泡阻止详解
bindtap就是点击事件 在.wxml文件绑定: <text id='textId' data-userxxx='100' bindtap='tapMessage'>cilck here</text> 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行 在后台.js文件中定义tapMessage函数: //index.js Page({ data: { mo: 'Hello World!!', userid : '1234',
-
微信小程序 冒泡事件原理解析
在微信小程序的事件分为冒泡事件和非冒泡事件: 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递. 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递. WXML的冒泡事件列表: 类型 触发条件 最低版本 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断,如来电提醒,弹窗 touchend 手指触摸动作结束 tap 手指触摸后马上离开 longpress 手指触摸后,超过350ms再离开
-
微信小程序转发事件实现解析
这篇文章主要介绍了微信小程序转发事件实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 和生命周期是同级,在.js文件里面设置 // 分享按钮 onShareAppMessage: function () { return { title: '前端伪大叔', path: "/pages/list/list", imageUrl: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK
-
微信小程序之数据绑定原理解析
最近在帮朋友写个小程序,本人小白一枚,但是好在计算机科班出身,有些概念一看还是明白的,只是之前没实际写过程序.于是最近看了好多资料和视频,不得不说,对于小白来讲,还是有点难度,但是不大. 通过最近看资料和别人的视频,总结一下: 1.页面布局,先画好.都是盒子,需要几个盒子,你就先画几个盒子.比如下面这个页面: 红色盒子 浅蓝盒子 绿色盒子(这个绿色盒子里又可以切分成两个盒子:白色字体较大一个盒子,白色字体较小一个盒子) 蓝色盒子 2.数据先静态,后动态 简单的说就是刚开始,你可以直接先往页面里塞
-
微信小程序 checkbox使用实例解析
这篇文章主要介绍了微信小程序 checkbox使用实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图如下: 实例代码如下: type_add.js // pages/detail_add/detail_add.js Page({ /** * 页面的初始数据 */ data: { selectData: "", //下拉列表的数据 height: 20, focus: false }, checkboxChange: fun
-
微信小程序图片自适应实现解析
这篇文章主要介绍了微信小程序图片自适应实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 关于微信小程序图片自适应的做法 在日常业务场景中,很多地方都需要图片进行列表的显示,但是这样就存在一个问题,由于每张上传的图片规格并不是一样的,就会发生图片要么过大,要么过小,或者被拉伸的情况,如下图 对于这个情况,我的思路是可以使用image标签内的bindload属性进行计算,bindload属性的介绍如下 下面就是具体的方法流程 1.首先我们在页
-
微信小程序 动态绑定事件并实现事件修改样式
微信小程序 动态绑定事件并实现事件修改样式 实例代码 wxml <scroll-view class="reportTypeScroll" scroll-x="true" scroll-left="{{toLeftNum}}"> <block wx:for-items="{{reportTypeList}}" wx:key="{{index}}"> <text type=&qu
-
微信小程序之事件交互操作实例分析
本文实例讲述了微信小程序之事件交互操作.分享给大家供大家参考,具体如下: 微信小程序-点击事件 什么是事件? 指点击,触摸,按下,滑动,松开,等一系列对手机屏幕操作. 下面代码所要呈现的效果就是给两个按钮一人一个ID然后点击谁,在上面显示信息那就显示 点击了谁,点击了多少次,这多少次没有分开啊,次数是点击他两的总和.下面另一代码是分开的,各计各的. 1. 在index.wxml 中设置点击事件(测试时需要删除注释部分) <view class="page"> //点击后在这
-
微信小程序tabBar设置实例解析
这篇文章主要介绍了微信小程序tabBar设置实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 我们先来看一份图,这个设置在官方文档中已经写得很清楚了,我只是做一个总结 注:我写注释是为了方便说明,在小程序中的json文件中是不能用注释的 这个tabBar属于全局属性,因此就在全局配置文件app.json中配置 1.tabBar的配置 "color": "#8a8a8a", "selectedColo
-
使用Vue.js开发微信小程序开源框架mpvue解析
前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为H5,mpvue将是十分契合的一种解决方案. 目前,mpvue已经在美团点评多个实际业务项目中得到了验证,因此我们决定将其开源,希望更多技术同行一起开发,应用到更广泛的场景里去.github项目地址请参见mpvue .使用文档请参见 http://mpvue.com/. 为了帮
随机推荐
- 详解使用React全家桶搭建一个后台管理系统
- step by step配置mysql复制的具体方法
- 显示某两个字符及之间的字符
- SublimeText编译C开发环境设置
- 手机短信轰炸(图)
- cmd fsutil 命令新建空文本文件
- hadoop是什么语言
- 详解IOS中文件路径判断是文件还是文件夹
- 基于ASP.NET+easyUI框架实现图片上传功能(判断格式+即时浏览 )
- WPF绑定实例详解
- 细谈php中SQL注入攻击与XSS攻击
- php获取数据库中数据的实现方法
- 浅析Jquery操作select
- Python 正则表达式入门(初级篇)
- 一个shell写的ping函数
- webpack2.0搭建前端项目的教程详解
- 深入理解spring boot异步调用方式@Async
- 基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
- Python的多维空数组赋值方法
- vue插件实现v-model功能