1# 触屏事件
2
3
4触屏事件指当手指/手写笔在组件上按下、滑动、抬起时触发的回调事件。包括[点击事件](#点击事件)、[拖拽事件](arkts-common-events-drag-event.md)和[触摸事件](#触摸事件)。
5
6
7**图1**  触摸事件原理
8
9
10![zh-cn_image_0000001562700461](figures/zh-cn_image_0000001562700461.png)
11
12
13## 点击事件
14
15点击事件是指通过手指或手写笔做出一次完整的按下和抬起动作。当发生点击事件时，会触发以下回调函数：
16
17
18
19```ts
20onClick(event: (event?: ClickEvent) => void)
21```
22
23
24event参数提供点击事件相对于窗口或组件的坐标位置，以及发生点击的事件源。
25
26
27  例如通过按钮的点击事件控制图片的显示和隐藏。
28
29```ts
30@Entry
31@Component
32struct IfElseTransition {
33  @State flag: boolean = true;
34  @State btnMsg: string = 'show';
35
36  build() {
37    Column() {
38      Button(this.btnMsg).width(80).height(30).margin(30)
39        .onClick(() => {
40          if (this.flag) {
41            this.btnMsg = 'hide';
42          } else {
43            this.btnMsg = 'show';
44          }
45          // 点击Button控制Image的显示和消失
46          this.flag = !this.flag;
47        })
48      if (this.flag) {
49        Image($r('app.media.icon')).width(200).height(200)
50      }
51    }.height('100%').width('100%')
52  }
53}
54```
55**图2**  通过按钮的点击事件控制图片的显示和隐藏
56
57
58![ClickEventControl.gif](figures/ClickEventControl.gif)
59
60
61
62## 触摸事件
63
64当手指或手写笔在组件上触碰时，会触发不同动作所对应的事件响应，包括按下（Down）、滑动（Move）、抬起（Up）事件：
65
66
67```ts
68onTouch(event: (event?: TouchEvent) => void)
69```
70
71- event.type为TouchType.Down：表示手指按下。
72
73- event.type为TouchType.Up：表示手指抬起。
74
75- event.type为TouchType.Move：表示手指按住移动。
76
77- event.type为TouchType.Cancel：表示打断取消当前手指操作。
78
79触摸事件可以同时多指触发，通过event参数可获取触发的手指位置、手指唯一标志、当前发生变化的手指和输入的设备源等信息。
80
81
82```ts
83// xxx.ets
84@Entry
85@Component
86struct TouchExample {
87  @State text: string = '';
88  @State eventType: string = '';
89
90  build() {
91    Column() {
92      Button('Touch').height(40).width(100)
93        .onTouch((event?: TouchEvent) => {
94          if(event){
95            if (event.type === TouchType.Down) {
96              this.eventType = 'Down';
97            }
98            if (event.type === TouchType.Up) {
99              this.eventType = 'Up';
100            }
101            if (event.type === TouchType.Move) {
102              this.eventType = 'Move';
103            }
104            this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
105            + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
106            + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
107            + event.target.area.width + '\nheight:' + event.target.area.height
108          }
109        })
110      Button('Touch').height(50).width(200).margin(20)
111        .onTouch((event?: TouchEvent) => {
112          if(event){
113            if (event.type === TouchType.Down) {
114              this.eventType = 'Down';
115            }
116            if (event.type === TouchType.Up) {
117              this.eventType = 'Up';
118            }
119            if (event.type === TouchType.Move) {
120              this.eventType = 'Move';
121            }
122            this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
123            + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
124            + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
125            + event.target.area.width + '\nheight:' + event.target.area.height
126          }
127        })
128      Text(this.text)
129    }.width('100%').padding(30)
130  }
131}
132```
133
134
135![zh-cn_image_0000001511900468](figures/zh-cn_image_0000001511900468.gif)
136
137## 相关实例
138
139针对触屏事件开发，有以下相关实例可供参考：
140
141- [ArkTS组件集（ArkTS）（Full SDK）（API10）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/UI/ArkTsComponentCollection/ComponentCollection)
142
143<!--RP1--><!--RP1End-->