1# Gesture Binding
2
3
4You can bind to each component different gesture events and design the logic for responding to these events. When a gesture is successfully recognized, the ArkUI framework notifies the component of the gesture recognition result through event callback.
5
6
7## gesture (Common Gesture Binding Method)
8
9
10```ts
11.gesture(gesture: GestureType, mask?: GestureMask)
12```
13
14**gesture** is a frequently used API for binding a gesture to a component.
15
16For example, you can use it to bind the tap gesture to the **Text** component.
17
18
19```ts
20// xxx.ets
21@Entry
22@Component
23struct Index {
24  build() {
25    Column() {
26      Text('Gesture').fontSize(28)
27        // Use the gesture API to bind the tap gesture.
28        .gesture(
29          TapGesture()
30            .onAction(() => {
31              console.info('TapGesture is onAction');
32            }))
33    }
34    .height(200)
35    .width(250)
36  }
37}
38```
39
40
41## priorityGesture (Gesture Binding Method with Priority)
42
43
44```ts
45.priorityGesture(gesture: GestureType, mask?: GestureMask)
46```
47
48The **priorityGesture** API binds gestures that are preferentially recognized to a component.
49
50By default, the child component preferentially recognizes the gesture specified by **gesture**, and the parent component preferentially recognizes the gesture specified by **priorityGesture** (if set).
51
52With regard to long press gestures, the component with the shortest minimum hold-down time responds first, ignoring the **priorityGesture** settings.
53
54In the following example, the parent component **Column** and child component **Text** are both bound to the tap gesture. As the **Column** is bound to the gesture through **priorityGesture**, the tap gesture recognized by the parent component is preferentially responded to.
55
56
57
58```ts
59// xxx.ets
60@Entry
61@Component
62struct Index {
63  build() {
64    Column() {
65      Text('Gesture').fontSize(28)
66        .gesture(
67          TapGesture()
68            .onAction(() => {
69              console.info('Text TapGesture is onAction');
70            }))
71    }
72    .height(200)
73    .width(250)
74    // When the tap gesture is bound to the parent Column component with priorityGesture, any tap gesture events from the Text component are ignored. This means that when the text area is tapped, the Column component's tap gesture event is given priority and responded to first.
75    .priorityGesture(
76      TapGesture()
77        .onAction(() => {
78          console.info('Column TapGesture is onAction');
79        }), GestureMask.IgnoreInternal)
80  }
81}
82```
83
84
85## parallelGesture (Parallel Gesture Binding Method)
86
87
88```ts
89.parallelGesture(gesture: GestureType, mask?: GestureMask)
90```
91
92The **parallelGesture** API binds to a component the gesture that can be triggered together with the child component gesture.
93
94By default, the gesture event does not bubble up. When a parent component and a child component are bound to a same gesture, the gesture events bound to the parent component and the child component compete with each other, and a gesture event of at most one component can be responded to. When **parallelGesture** is set, the same gesture events can be triggered for the parent and child components, thereby implementing a bubbling effect.
95
96
97
98```ts
99// xxx.ets
100@Entry
101@Component
102struct Index {
103  build() {
104    Column() {
105      Text('Gesture').fontSize(28)
106        .gesture(
107          TapGesture()
108            .onAction(() => {
109              console.info('Text TapGesture is onAction');
110            }))
111    }
112    .height(200)
113    .width(250)
114    // When parallelGesture is set, the tap gestures on the Column component and on the child Text component are both recognized.
115    .parallelGesture(
116      TapGesture()
117        .onAction(() => {
118          console.info('Column TapGesture is onAction');
119        }), GestureMask.Normal)
120  }
121}
122```
123