• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Event<a name="EN-US_TOPIC_0000001063300566"></a>
2
3-   [Gesture Events](#section21104561094)
4
5Events mainly include gesture events for touchscreen devices.
6
7## Gesture Events<a name="section21104561094"></a>
8
9A gesture represents a semantic action \(for example, tap, drag, or longpress\) that can trigger one or more events. A gesture lifecycle may consist of multiple events from the start to the end of the gesture. The JS UI framework supports the following gesture events:
10
11**Touch**
12
13-   **touchstart**: Triggered when the touch starts
14-   **touchmove**: Triggered when the touch moves
15-   **touchcancel**: Triggered when the touch is interrupted, for example, by an incoming call notification or pop-up message
16-   **touchend**: Triggered when the touch ends
17
18**Click**
19
20**click**: Triggered when a user taps the screen quickly.
21
22**Longpress**
23
24**longpress**: Triggered when a user keeps tapping the screen at the same position for a while.
25
26The following is an example:
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