1# Hit Test Control
2
3Hit test control allows you to configure hit testing for components. When processing a touch event, ArkUI performs hit testing on the touch points and component area before the touch event is triggered, in order to determine the component that will respond to the touch event, and then dispatches the touch event based on the hit test result. The **hitTestBehavior** attribute sets how the component behaves during hit testing. The settings will affect the hit test result and thereby the subsequent touch event distribution. For details, see **[HitTestMode](#hittestmode)**.
4
5>  **NOTE**
6>  - The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
7>  - When the touch areas of nodes in the **Stack** component overlap, hit testing is performed only on the node displayed at the top layer by default. To perform hit testing on the node at the lower layer, set **hitTestBehavior** to **HitTestMode.Transparent** for the upper-layer node.
8
9## hitTestBehavior
10
11hitTestBehavior(value: HitTestMode)
12
13Sets how the component behaves during hit testing.
14
15**Atomic service API**: This API can be used in atomic services since API version 11.
16
17**System capability**: SystemCapability.ArkUI.ArkUI.Full
18
19**Parameters**
20
21| Name           | Type    | Mandatory                            | Description                              |
22| -------------------- | -------- | ---------------------------------------- | ---------------------------------------- |
23| value | [HitTestMode](#hittestmode) | Yes| How the component behaves during hit testing.<br>Default value: **HitTestMode.Default**|
24
25## HitTestMode
26
27| Name         | Value   | Description                                      |
28| ------------| ---------|----------------------------------- |
29| Default     | 0 |Both the node and its child nodes respond to the hit test of a touch event, but its sibling nodes are blocked from the hit test. The hit test for ancestor nodes is not affected.|
30| Block       | 1 |The node responds to the hit test of a touch event, but its child nodes and sibling nodes are blocked from the hit test. Ancestor nodes are also blocked from the hit test.|
31| Transparent | 2 |Both the node and its child nodes respond to the hit test of a touch event, and its sibling nodes are also considered during the hit test. The hit test for ancestor nodes is not affected.|
32| None        | 3 |The node does not respond to the hit test of a touch event, but its child node and sibling node are considered during the hit test. The hit test for ancestor nodes is not affected.|
33
34
35## Example
36
37This example demonstrates the touch effects of **Block** and **Transparent** hit test modes by setting different **HitTestMode** values.
38
39```ts
40// xxx.ets
41@Entry
42@Component
43struct HitTestBehaviorExample {
44  build() {
45    // outer stack
46    Stack() {
47      Button('outer button')
48        .onTouch((event) => {
49          console.info('outer button touched type: ' + (event as TouchEvent).type)
50        })
51      // inner stack
52      Stack() {
53        Button('inner button')
54          .onTouch((event) => {
55            console.info('inner button touched type: ' + (event as TouchEvent).type)
56          })
57      }
58      .width("100%").height("100%")
59      .hitTestBehavior(HitTestMode.Block)
60      .onTouch((event) => {
61        console.info('stack touched type: ' + (event as TouchEvent).type)
62      })
63
64      Text('Transparent')
65        .hitTestBehavior(HitTestMode.Transparent)
66        .width("100%").height("100%")
67        .onTouch((event) => {
68          console.info('text touched type: ' + (event as TouchEvent).type)
69        })
70    }.width(300).height(300)
71  }
72}
73```
74