快应用 通用事件
通用事件,即所有组件都支持的事件回调
开发者可以在组件标签上使用on{eventName}
(如onclick
)或@{eventName}
(如@click
)注册回调事件
更详细的讲解,可查阅 事件绑定文档 了解
示例代码
<template>
<div>
<text onclick="clickFunction1">line 1</text>
<text @click="clickFunction2">line 2</text>
</div>
</template>
通用事件列表:
名称 | 参数 | 描述 | 冒泡 |
---|---|---|---|
touchstart 1030+
|
TouchEvent | 手指刚触摸组件时触发 | 1040+ |
touchmove 1030+
|
TouchEvent | 手指触摸后移动时触发 | 1040+ |
touchend 1030+
|
TouchEvent | 手指触摸动作结束时触发 | 1040+ |
touchcancel 1030+
|
TouchEvent | 手指触摸动作被打断时触发。如:来电、弹窗 | 1040+ |
click | MouseEvent 1050+
|
组件被点击时触发 | 1040+ |
longpress | MouseEvent 1050+
|
组件被长按时触发 | 1040+ |
focus | - | 组件获得焦点时触发 | 不支持 |
blur | - | 组件失去焦点时触发 | 不支持 |
appear | - | 组件出现时触发 | 不支持 |
disappear | - | 组件消失时触发 | 不支持 |
swipe 1000+
|
{direction:[left | right | up | down ]} |
组件上快速滑动后触发。
参数说明: left: 向左滑动; right: 向右滑动; up: 向上滑动; down:向下滑动。 |
不支持 |
resize 1050+
|
{offsetWidth: offsetWidthValue, offsetHeight: offsetHeightValue, offsetLeft: offsetLeftValue, offsetTop: offsetTopValue} | 组件大小改变后触发 | 不支持 |
关于冒泡
1040+ 版本对某些通用事件开放了冒泡功能,这些事件的响应行为与之前版本差异较大。因此为了兼容之前版本,开发者需要在 manifest.json 中将 minPlatformVersion 设置为 1040 或以上,才会启用这类通用事件的冒泡功能。
关于事件冒泡及阻止事件冒泡详细案例,请参考:事件监听
事件对象
1、TouchEvent 类型说明:
属性 | 类型 | 说明 |
---|---|---|
touches | TouchList | 触摸事件,当前停留在屏幕中的触摸点信息的数组 |
changedTouches | TouchList | 触摸事件,当前变化的触摸点信息的数组.changedTouches 数据格式同 touches, 表示有变化的触摸点,如从无变有(touchstart),位置变化(touchmove),从有变无(touchend、touchcancel),
比如用户手指离开屏幕时,touches 数组中无数据,而 changedtouches 则会保存离开前的数据 |
其中,TouchList 是 Touch 对象的集合。
2、Touch 类型说明:
属性 | 类型 | 说明 | |||
---|---|---|---|---|---|
identifier | number | 触摸点的标识符。对于多点同时触摸则是 0,1[,2,3,...],分别表示第一个手指、第二个手指...。
一次触摸动作(手指按下到手指离开的过程),在整个屏幕移动过程中,该标识符不变,可以用来判断是否是同一次触摸过程 |
|||
clientX | number | 距离可见区域左边沿的 X 轴坐标,不包含任何滚动偏移。 | |||
clientY | number | 距离可见区域上边沿的 Y 轴坐标,不包含任何滚动偏移以及状态栏和 titlebar 的高度。 | |||
pageX | number | 距离可见区域左边沿的 X 轴坐标,包含任何滚动偏移。 | |||
pageY | number | 距离可见区域上边沿的 Y 轴坐标,包含任何滚动偏移。(不包含状态栏和 titlebar 的高度) | |||
offsetX | number | 距离事件触发对象左边沿 X 轴的距离 | |||
offsetY | number | 距离事件触发对象上边沿 Y 轴的距离 |
3、MouseEvent 类型说明:
属性 | 类型 | 说明 | ||||
---|---|---|---|---|---|---|
clientX | number | 距离可见区域左边沿的 X 轴坐标,不包含任何滚动偏移 | ||||
clientY | number | 距离可见区域上边沿的 Y 轴坐标,不包含任何滚动偏移以及状态栏和 titlebar 的高度 | ||||
pageX | number | 距离可见区域左边沿的 X 轴坐标,包含任何滚动偏移 | ||||
pageY | number | 距离可见区域上边沿的 Y 轴坐标,包含任何滚动偏移。(不包含状态栏和 titlebar 的高度) | ||||
offsetX | number | 距离事件触发对象左边沿 X 轴的距离 | ||||
offsetY | number | 距离事件触发对象上边沿 Y 轴的距离 |
示例:
如下,在 div 上绑定了 click 和 touchmove 事件,触发事件时将事件打印出来。
<template>
<div class="root-page">
<div class="touch-region" onclick="click" ontouchmove="move"></div>
</div>
</template>
<style>
.root-page {
flex-direction: column;
align-items: center;
}
.touch-region {
width: 80%;
height: 20%;
background-color: #444444;
}
</style>
<script>
export default {
private: {},
click(event) {
console.log("click event fired")
},
move(event) {
console.log("move event touches:" + JSON.stringify(event.touches))
console.log("move event changedTouches:" + JSON.stringify(event.changedTouches))
}
}
</script>
打印结果如下,click 事件:
move event touches:[
{
"offsetX": 296,
"identifier": 0,
"offsetY": 113.48148345947266,
"clientY": 113.48148345947266,
"clientX": 360,
"pageY": 113.48148345947266,
"pageX": 360
}
]
move event changedTouches:[
{
"offsetX": 296,
"identifier": 0,
"offsetY": 113.48148345947266,
"clientY": 113.48148345947266,
"clientX": 360,
"pageY": 113.48148345947266,
"pageX": 360
}
]
click event fired