1# Touchscreen Event
2
3
4Touchscreen events are events triggered when a finger or stylus is placed on, moved along, or lifted from a component. They can be classified as [click event](#click-event), [drag event](arkts-common-events-drag-event.md), or [touch event](#touch-event).
5
6
7**Figure 1** Touchscreen event principles
8
9
10![en-us_image_0000001562700461](figures/en-us_image_0000001562700461.png)
11
12
13## Click Event
14
15A click event is triggered when a complete press and lift action is performed by using a finger or a stylus. When a click event occurs, the following callback is triggered:
16
17
18
19```ts
20onClick(event: (event?: ClickEvent) => void)
21```
22
23
24The **event** parameter provides the coordinates of the click relative to the window or component as well as the event source where the click occurs, for example, a button, a click on which shows or hides an image.
25
26```ts
27@Entry
28@Component
29struct IfElseTransition {
30  @State flag: boolean = true;
31  @State btnMsg: string = 'show';
32
33  build() {
34    Column() {
35      Button(this.btnMsg).width(80).height(30).margin(30)
36        .onClick(() => {
37          if (this.flag) {
38            this.btnMsg = 'hide';
39          } else {
40            this.btnMsg = 'show';
41          }
42          // Click the button to show or hide the image.
43          this.flag = !this.flag;
44        })
45      if (this.flag) {
46        Image($r('app.media.icon')).width(200).height(200)
47      }
48    }.height('100%').width('100%')
49  }
50}
51```
52**Figure 2** Showing or hiding an image through the click event of a button
53
54
55![ClickEventControl.gif](figures/ClickEventControl.gif)
56
57
58
59## Touch Event
60
61A touch event is triggered when a finger or stylus is placed on, moved along, or lifted from a component.
62
63
64```ts
65onTouch(event: (event?: TouchEvent) => void)
66```
67
68- If **event.type** is **TouchType.Down**, the finger or stylus is placed on the component.
69
70- If **event.type** is **TouchType.Up**, the finger or stylus is lifted from the component.
71
72- If **event.type** is **TouchType.Move**, the finger or stylus is moved along the component.
73
74- If **event.type** is **TouchType.Cancel**, the current finger operation is interrupted and canceled.
75
76The touch event supports single and multi-touch interactions. Information about the touch event can be obtained using the **event** parameter, such as the location of the finger that triggers the event, unique identifier of the finger, finger information changed, and the input device source.
77
78
79```ts
80// xxx.ets
81@Entry
82@Component
83struct TouchExample {
84  @State text: string = '';
85  @State eventType: string = '';
86
87  build() {
88    Column() {
89      Button('Touch').height(40).width(100)
90        .onTouch((event?: TouchEvent) => {
91          if(event){
92            if (event.type === TouchType.Down) {
93              this.eventType = 'Down';
94            }
95            if (event.type === TouchType.Up) {
96              this.eventType = 'Up';
97            }
98            if (event.type === TouchType.Move) {
99              this.eventType = 'Move';
100            }
101            this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
102            + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
103            + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
104            + event.target.area.width + '\nheight:' + event.target.area.height
105          }
106        })
107      Button('Touch').height(50).width(200).margin(20)
108        .onTouch((event?: TouchEvent) => {
109          if(event){
110            if (event.type === TouchType.Down) {
111              this.eventType = 'Down';
112            }
113            if (event.type === TouchType.Up) {
114              this.eventType = 'Up';
115            }
116            if (event.type === TouchType.Move) {
117              this.eventType = 'Move';
118            }
119            this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
120            + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
121            + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
122            + event.target.area.width + '\nheight:' + event.target.area.height
123          }
124        })
125      Text(this.text)
126    }.width('100%').padding(30)
127  }
128}
129```
130
131
132![en-us_image_0000001511900468](figures/en-us_image_0000001511900468.gif)
133