• 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  flex-direction: column;
53  justify-content: center;
54  align-items: center;
55}
56.text-container {
57  margin-top: 10px;
58  flex-direction: column;
59  width: 750px;
60  height: 50px;
61  background-color: #09ba07;
62}
63.text-style {
64  width: 100%;
65  line-height: 50px;
66  text-align: center;
67  font-size: 24px;
68  color: #ffffff;
69}
70```
71
72```js
73// xxx.js
74export default {
75  data: {
76    touchstart: 'touchstart',
77    touchmove: 'touchmove',
78    touchend: 'touchend',
79    touchcancel: 'touchcancel',
80    onClick: 'onclick',
81    onLongPress: 'onlongpress',
82  },
83  touchCancel: function (event) {
84    this.touchcancel = 'canceled';
85  },
86  touchEnd: function(event) {
87    this.touchend = 'ended';
88  },
89  touchMove: function(event) {
90    this.touchmove = 'moved';
91  },
92  touchStart: function(event) {
93    this.touchstart = 'touched';
94  },
95  longPress: function() {
96    this.onLongPress = 'longpressed';
97  },
98  click: function() {
99    this.onClick = 'clicked';
100  },
101}
102```
103