• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Defining Gesture Events
2
3A 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. Supported events are as follows:
4
5**Touch**
6
7- **touchstart**: Triggered when the touch starts.
8
9- **touchmove**: Triggered when the touch moves.
10
11- **touchcancel**: Triggered when the touch is interrupted, for example, by an incoming call notification or pop-up message.
12
13- **touchend**: Triggered when the touch ends.
14
15**Click**
16
17**click**: Triggered when a user taps the screen quickly.
18
19**Longpress**
20
21**longpress**: Triggered when a user keeps tapping the screen at the same position for a while.
22
23The following is an example:
24
25```html
26<!-- xxx.hml -->
27<div class="container">
28  <div class="text-container" onclick="click">
29    <text class="text-style">{{onClick}}</text>
30  </div>
31  <div class="text-container" ontouchstart="touchStart">
32    <text class="text-style">{{touchstart}}</text>
33  </div>
34  <div class="text-container" ontouchmove="touchMove">
35    <text class="text-style">{{touchmove}}</text>
36  </div>
37  <div class="text-container" ontouchend="touchEnd">
38    <text class="text-style">{{touchend}}</text>
39  </div>
40  <div class="text-container" ontouchcancel="touchCancel">
41    <text class="text-style">{{touchcancel}}</text>
42  </div>
43  <div class="text-container" onlongpress="longPress">
44    <text class="text-style">{{onLongPress}}</text>
45  </div>
46</div>
47```
48
49```css
50/* xxx.css */
51.container {
52  width: 100%;
53  height: 100%;
54  flex-direction: column;
55  justify-content: center;
56  align-items: center;
57}
58.text-container {
59  margin-top: 30px;
60  flex-direction: column;
61  width: 600px;
62  height: 70px;
63  background-color: #0000FF;
64}
65.text-style {
66  width: 100%;
67  line-height: 50px;
68  text-align: center;
69  font-size: 24px;
70  color: #ffffff;
71}
72```
73
74```js
75// xxx.js
76export default {
77  data: {
78    touchstart: 'touchstart',
79    touchmove: 'touchmove',
80    touchend: 'touchend',
81    touchcancel: 'touchcancel',
82    onClick: 'onclick',
83    onLongPress: 'onlongpress',
84  },
85  touchCancel: function (event) {
86    this.touchcancel = 'canceled';
87  },
88  touchEnd: function(event) {
89    this.touchend = 'ended';
90  },
91  touchMove: function(event) {
92    this.touchmove = 'moved';
93  },
94  touchStart: function(event) {
95    this.touchstart = 'touched';
96  },
97  longPress: function() {
98    this.onLongPress = 'longpressed';
99  },
100  click: function() {
101    this.onClick = 'clicked';
102  },
103}
104```
105
106![en-us_image_00000011](figures/en-us_image_00000011.gif)