欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 微信小程序--鼠标事件 点击事件返回值的target分析

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:789

HTML5自适应律师工作室类网

2020-04-04   浏览:654

高端HTML5响应式企业通用网

2020-05-06   浏览:560

html5响应式外贸网站英文版

2020-05-08   浏览:545

HTML5影视传媒文化公司类网

2020-05-12   浏览:543

微信小程序--鼠标事件 点击事件返回值的target分析

发布时间:2020-12-27  

小程序鼠标事件" style="margin: 0.8em 0px; padding: 0px; font-weight: 100; line-height: 1.3em; font-size: 2.6em; color: rgb(63, 63, 63); font-family: 'microsoft yahei'; background-color: rgb(255, 255, 255);">微信小程序鼠标事件

事件分类

事件分为冒泡事件和非冒泡事件: 
1. 冒泡事件(bind):当一个组件上的事件被触发后,该事件会向父节点传递。 
2. 非冒泡事件(catch):当一个组件上的事件被触发后,该事件不会向父节点传递。
bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

WXML的冒泡事件列表 类型 触发条件
touchstart   手指触摸动作开始  
touchmove   手指触摸后移动  
touchcancel   手指触摸动作被打断,如来电提醒,弹窗  
touchend   手指触摸动作结束  
tap   手指触摸后马上离开  
longtap   手指触摸后,超过350ms再离开  
冒泡讲解 <viewid="outter"bindtap="handleTap1"> outer view <viewid="middle"catchtap="handleTap2"> middle view <viewid="inner"bindtap="handleTap3"> inner view view> view> view>

 

点击inner view后只触发handleTap3,然后再触发handleTap2.不触发handleTap1。 
因为handleTap2中的绑定类型是catch,阻止了冒泡事件。

返回对象 BaseEvent 基础事件对象属性列表: 属性 类型 说明
type   String   事件类型  
timeStamp   Integer   事件生成时的时间戳  
target   Object   触发事件的组件的一些属性值集合  
currentTarget   Object   当前组件的一些属性值集合  
type

代表事件的类型。

timeStamp

页面打开到触发事件所经过的毫秒数。

target

触发事件的源组件。

属性 类型 说明
id   String   事件源组件的id  
tagName   String   当前组件的类型  
dataset   Object   事件源组件上由data-开头的自定义属性组成的集合  

dataset

在组件中可以定义数据,这些数据将会通过事件传递给 SERVICE。 书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。

示例: 
DataSet Test

Page({ bindViewTap:function(event){ event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法 event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写 } })

 

CustomEvent 自定义事件对象属性列表(继承 BaseEvent): 属性 类型 说明
detail   Object   额外的信息  
detail

自定义事件所携带的数据,如表单组件的提交事件会携带用户的输入,媒体的错误事件会携带错误信息,详见组件定义中各个事件的定义。