codecamp

快应用 通用事件

通用事件,即所有组件都支持的​事件回调

开发者可以在组件标签上使用​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


快应用 组件文档
快应用 通用属性
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

快应用 参考手册

快应用 安全

快应用 声音音频

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }