1# Touch Target
2
3You can set the touch target for components that support universal click events, touch events, and gestures.
4
5
6>  **NOTE**
7>
8>  The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
9
10## responseRegion
11
12responseRegion(value: Array<Rectangle> | Rectangle)
13
14Sets one or more touch targets.
15
16**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets.
17
18**Atomic service API**: This API can be used in atomic services since API version 11.
19
20**System capability**: SystemCapability.ArkUI.ArkUI.Full
21
22**Parameters**
23
24| Name| Type                                                        | Mandatory| Description                                                        |
25| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
26| value  | Array&lt;[Rectangle](#rectangle)&gt; \| [Rectangle](#rectangle) | Yes  | One or more touch targets, including their location and size.<br>The default touch target is the entire component. Default value:<br>{<br>x: 0,<br>y: 0,<br>width: '100%',<br>height: '100%'<br>}<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.|
27
28
29## Rectangle
30
31**Widget capability**: This API can be used in ArkTS widgets since API version 9.
32
33**Atomic service API**: This API can be used in atomic services since API version 11.
34
35| Name       | Type                      | Mandatory  | Description                            |
36| ------ | ----------------------------- | -----| -------------------------------- |
37| x      | [Length](ts-types.md#length)  | No  | X coordinate of the touch point relative to the upper left corner of the component.<br>Default value: **0vp**|
38| y      | [Length](ts-types.md#length)  | No  | Y coordinate of the touch point relative to the upper left corner of the component.<br>Default value: **0vp**|
39| width  | [Length](ts-types.md#length)  | No  | Width of the touch target.<br>Default value: **'100%'**|
40| height | [Length](ts-types.md#length) | No  | Height of the touch target.<br>Default value: **'100%'**|
41
42  >  **NOTE**
43  >
44  >  **x** and **y** can be set to a positive or negative percentage value. For example, when **x** is set to **'100%'**, the touch target is the offset from the right edge of the component by the component's width. When **x** is set to **'-100%'**, the touch target is the offset from the left edge of the component by the component's width. When **y** is set to **'100%'**, the touch target is the offset from the bottom edge of the component by the component's height. When **y** is set to **'-100%'**, the touch target is the offset from the top edge of the component by the component's height.
45  >
46  >  **width** and **height** can only be set to positive percentage values. When **width** is set to **'100%'**, the width of the touch target is equal to that of the component. For example, if the width of a component is 100 vp, **'100%'** indicates that the width of the touch target is also 100 vp. when **height** is set to **'100%'**, the height of the touch target is equal to that of the component.
47  >
48  >  The percentage is measured relative to the component itself.
49
50
51## Example
52
53This example demonstrates how to set a touch target for a button using **responseRegion** to respond to click events.
54
55```ts
56// xxx.ets
57@Entry
58@Component
59struct TouchTargetExample {
60  @State text: string = ""
61
62  build() {
63    Column({ space: 20 }) {
64      Text("{x:0,y:0,width:'50%',height:'100%'}")
65      // The width of the touch target is half of that of the button. The user will get no response if they touch the right of the button.
66      Button("button1")
67        .responseRegion({ x: 0, y: 0, width: '50%', height: '100%' })
68        .onClick(() => {
69          this.text = 'button1 clicked'
70        })
71
72      // Add multiple touch targets for a component.
73      Text("[{x:'100%',y:0,width:'50%',height:'100%'}," +
74      "\n{ x: 0, y: 0, width: '50%', height: '100%' }]")
75      Button("button2")
76        .responseRegion([
77          { x: '100%', y: 0, width: '50%', height: '100%' }, // The width of the first touch target is half of that of the button. The touch event is triggered if the half width area on the right of the button is touched.
78          { x: 0, y: 0, width: '50%', height: '100%' } // The width of the second touch target is half of the button width. The touch event is triggered if the left half of button2 is touched.
79        ])
80        .onClick(() => {
81          this.text = 'button2 clicked'
82        })
83      // The touch target is located downward by one button height, with its size equal to the button size. The touch event is triggered if the lower part of button3 is touched.
84      Text("{x:0,y:'100%',width:'100%',height:'100%'}")
85      Button("button3")
86        .responseRegion({ x: 0, y: '100%', width: '100%', height: '100%' })
87        .onClick(() => {
88          this.text = 'button3 clicked'
89        })
90
91      Text(this.text).margin({ top: 50 })
92    }.width('100%').margin({ top: 10 })
93  }
94}
95```
96
97![touchtarget.gif](figures/touchtarget.gif)
98