教程 其他 框架 组件 接口

通用事件

通用事件列表:

名称参数描述
touchstart 1030+TouchEvent手指刚触摸组件时触发
touchmove 1030+TouchEvent手指触摸后移动时触发
touchend 1030+TouchEvent手指触摸动作结束时触发
touchcancel 1030+TouchEvent手指触摸动作被打断时触发。如:来电、弹窗
click-组件被点击时触发
longpress-组件被长按时触发
focus-组件获得焦点时触发
blur-组件失去焦点时触发
appear-组件出现时触发
disappear-组件消失时触发
swipe 1000+{direction:[left | right | up | down]}组件上快速滑动后触发。
参数说明:
left: 向左滑动;
right: 向右滑动;
up:  向上滑动;
down:向下滑动。

事件对象

1、TouchEvent 类型说明:

属性类型说明
touchesTouchList触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouchesTouchList触摸事件,当前变化的触摸点信息的数组.changedTouches 数据格式同 touches, 表示有变化的触摸点,如从无变有(touchstart),位置变化(touchmove),从有变无(touchend、touchcancel),
比如用户手指离开屏幕时,touches 数组中无数据,而 changedtouches 则会保存离开前的数据

其中,TouchList 是 Touch 对象的集合。

2、Touch 类型说明:

属性类型说明
identifiernumber触摸点的标识符。对于多点同时触摸则是 0,1[,2,3,...],分别表示第一个手指、第二个手指...。
一次触摸动作(手指按下到手指离开的过程),在整个屏幕移动过程中,该标识符不变,可以用来判断是否是同一次触摸过程
clientXnumber距离可见区域左边沿的 X 轴坐标,不包含任何滚动偏移。
clientYnumber距离可见区域上边沿的 Y 轴坐标,不包含任何滚动偏移以及状态栏和 titlebar 的高度。
pageXnumber距离可见区域左边沿的 X 轴坐标,包含任何滚动偏移。
pageYnumber距离可见区域上边沿的 Y 轴坐标,包含任何滚动偏移。(不包含状态栏和 titlebar 的高度)
offsetXnumber距离事件触发对象左边沿 X 轴的距离
offsetYnumber距离事件触发对象上边沿 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,null,2))
            console.log("move event changedTouches:" + JSON.stringify(event.changedTouches,null,2)
        }
    }
</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

条匹配 "" 的结果

    没有搜索到与 "" 相关的内容