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