1# Click Control
2
3Click control attributes are used to set whether a component can respond to finger interactions such as click and touch events.
4
5>  **NOTE**
6>
7>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## Attributes
11
12
13| Name     | Type| Description                   |
14| ----------- | -------- | ------------------------ |
15| touchable<sup>(deprecated)</sup>   | boolean  | Whether the component can respond to finger interactions such as click and touch events.<br>Default value: **true**<br>**NOTE**<br>This API is deprecated since API version 9. You are advised to use [hitTestBehavior](ts-universal-attributes-hit-test-behavior.md) instead.|
16
17
18## Example
19
20```ts
21// xxx.ets
22@Entry
23@Component
24struct TouchAbleExample {
25  @State text1: string = ''
26  @State text2: string = ''
27
28  build() {
29    Stack() {
30      Rect()
31        .fill(Color.Gray).width(150).height(150)
32        .onClick(() => {
33          console.info(this.text1 = 'Rect Clicked')
34        })
35        .overlay(this.text1, { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
36      Ellipse()
37        .fill(Color.Pink).width(150).height(80)
38        .touchable(false) // When the Ellipse area is touched, the message "Ellipse Clicked" is not displayed.
39        .onClick(() => {
40          console.info(this.text2 = 'Ellipse Clicked')
41        })
42        .overlay(this.text2, { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
43    }.margin(100)
44  }
45}
46```
47
48![en-us_image_0000001257138351](figures/en-us_image_0000001257138351.gif)
49