• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 事件<a name="ZH-CN_TOPIC_0000001063300566"></a>
2
3-   [手势事件](#section21104561094)
4
5事件主要为手势事件。手势事件主要用于具有触摸屏的设备。
6
7## 手势事件<a name="section21104561094"></a>
8
9手势表示由单个或多个事件识别的语义动作（例如：点击、拖动和长按）。一个完整的手势也可能由多个事件组成，对应手势的生命周期。JS UI框架支持的手势事件有：
10
11**触摸**
12
13-   touchstart：手指触摸动作开始。
14-   touchmove：手指触摸后移动。
15-   touchcancel：手指触摸动作被打断，如来电提醒、弹窗。
16-   touchend：手指触摸动作结束。
17
18**点击**
19
20click：用户快速轻敲屏幕。
21
22**长按**
23
24longpress：用户在相同位置长时间保持与屏幕接触。
25
26具体的使用示例如下：
27
28```
29<!-- xxx.hml -->
30<div class="container">
31  <div class="text-container" onclick="click">
32    <text class="text-style">{{onClick}}</text>
33  </div>
34  <div class="text-container" ontouchstart="touchStart">
35    <text class="text-style">{{touchstart}}</text>
36  </div>
37  <div class="text-container" ontouchmove="touchMove">
38    <text class="text-style">{{touchmove}}</text>
39  </div>
40  <div class="text-container" ontouchend="touchEnd">
41    <text class="text-style">{{touchend}}</text>
42  </div>
43  <div class="text-container" ontouchcancel="touchCancel">
44    <text class="text-style">{{touchcancel}}</text>
45  </div>
46  <div class="text-container" onlongpress="longPress">
47    <text class="text-style">{{onLongPress}}</text>
48  </div>
49</div>
50```
51
52```
53/* xxx.css */
54.container {
55  flex-direction: column;
56  justify-content: center;
57  align-items: center;
58}
59.text-container {
60  margin-top: 10px;
61  flex-direction: column;
62  width: 750px;
63  height: 50px;
64  background-color: #09ba07;
65}
66.text-style {
67  width: 100%;
68  line-height: 50px;
69  text-align: center;
70  font-size: 24px;
71  color: #ffffff;
72}
73```
74
75```
76// xxx.js
77export default {
78  data: {
79    touchstart: 'touchstart',
80    touchmove: 'touchmove',
81    touchend: 'touchend',
82    touchcancel: 'touchcancel',
83    onClick: 'onclick',
84    onLongPress: 'onlongpress',
85  },
86  touchCancel: function (event) {
87    this.touchcancel = 'canceled';
88  },
89  touchEnd: function(event) {
90    this.touchend = 'ended';
91  },
92  touchMove: function(event) {
93    this.touchmove = 'moved';
94  },
95  touchStart: function(event) {
96    this.touchstart = 'touched';
97  },
98  longPress: function() {
99    this.onLongPress = 'longpressed';
100  },
101  click: function() {
102    this.onClick = 'clicked';
103  },
104}
105```
106
107