Custom Event Interception
The custom event interception capability provided for components allows you to dynamically determine the HitTestMode attribute of a component based on the position where the event is triggered on the component, as well as other event information such as the input source.
NOTE
The initial APIs of this module are supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.
onTouchIntercept
onTouchIntercept(callback: Callback<TouchEvent, HitTestMode>): T
Binds a custom event interception callback to a component.
NOTE
This API can be called in attributeModifier since API version 20.
Atomic service API: This API can be used in atomic services since API version 12.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| callback | Callback<TouchEvent, HitTestMode> | Yes | Custom event interception callback. Triggered during hit testing and sets the hit test behavior for the component based on the return value. |
Return value
| Type | Description |
|---|---|
| T | Current component. |
Example
This example demonstrates how to modify the HitTestMode attribute of a component using onTouchIntercept.
// xxx.ets
@Entry
@Component
struct Index {
isPolygon(event: TouchEvent) {
return true;
}
build() {
Row() {
Column() {
Text("hello world")
.backgroundColor(Color.Blue)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
console.info("Text click");
})
}
.width(400)
.height(300)
.backgroundColor(Color.Pink)
.onClick(() => {
console.info("Column click");
})
// Call onTouchIntercept to modify the HitTestMode attribute of the component.
.onTouchIntercept((event: TouchEvent) => {
console.info("OnTouchIntercept + " + JSON.stringify(event));
// Check whether touches is empty before using it.
if (event && event.touches) {
let touches = event.touches;
for (let i = 0; touches[i] != null; i++) {
console.info('onTouchIntercept touches:', JSON.stringify(touches[i]));
}
}
if (this.isPolygon(event)) {
return HitTestMode.None;
}
return HitTestMode.Default;
})
}
.width('100%')
}
}