• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Interacting with Applications Using Gestures
2On mobile or touch-enabled web applications, users interact with web pages through gestures. ArkWeb supports the recognition of common gestures, such as touch and hold, swipe, and tap, providing a rich user interaction experience.
3## ArkWeb Gesture Recognition
4ArkWeb receives the ArkUI [touch event](../ui/arkts-interaction-development-guide-touch-screen.md#touch-event) and identifies the gesture. For details about the distribution policy of touch events, see [Basic Interaction Principles](../ui/arkts-interaction-basic-principles.md). ArkWeb gestures comply with the touch events, UI events, and pointer events defined by the W3C standard.
5
6The following table lists identifications of common events.
7| Gesture Event| Trigger Conditions|
8| --- | --- |
9| Tap | Triggered when a button is pressed and then lifted within a short interval.|
10| LongPress | Triggered when a button is pressed for a period of time without moving.|
11| ScrollBegin | Triggered when the page scrolling starts.|
12| ScrollUpdate | Triggered when a page is scrolled, including flinging and dragging. Dragging indicates scrolling when a finger does not leave the screen. Flinging indicates that the page continues to scroll after the finger leaves the screen.|
13| ScrollEnd | Triggered when the scrolling ends.|
14| FlingStart| Triggered when a fling starts.|
15| FlingCancel| Triggered when a fling is canceled.|
16| PinchBegin | Triggered when a pinch gesture starts.|
17| PinchUpdate | Triggered when a pinch gesture is updated.|
18| PinchEnd | Triggered when a pinch gesture ends.|
19
20## ArkWeb Gestures and ArkUI Gestures
21ArkUI provides [gesture binding](../ui/arkts-gesture-events-binding.md) while ArkWeb has independent gesture recognition. Therefore, you need to distinguish these two types of gestures.
22- ArkWeb gestures: automatically generated by **Web** components upon receiving touch events. These gestures are used on web pages.
23- ArkUI gestures: received by and used on the **Web** component. ArkUI gestures are not directly used on web pages.
24
25The following uses zoom as an example to describe the differences between the two gestures:
26- When two fingers are pinched on the web page, the content in the **Web** component is zoomed in or out. This is because ArkWeb identifies the pinch event and applies it to the web page.
27- If a user pinches three fingers together, the **Web** component itself scales. This is because ArkWeb receives the [Pinch Gesture](../ui/arkts-gesture-events-single-gesture.md#pinch-gesture) identified by ArkUI and executes the bound callback function. In addition, ArkWeb supports the **scale** method, which can be used to adjust the zoom ratio of the **Web** component.
28
29> **NOTE**
30>
31> This example is used only to describe the differences between ArkUI gestures and ArkWeb gestures. You are not advised to use this method to scale **Web** components.
32```ts
33// xxx.ets
34import { webview } from '@kit.ArkWeb';
35
36@Entry
37@Component
38struct Index {
39  @State scaleValue: number = 1;
40  @State pinchValue: number = 1;
41  controller: webview.WebviewController = new webview.WebviewController();
42
43  build() {
44    Column() {
45      Web({ src: 'www.example.com', controller: this.controller })
46      // Bind the zoom ratio to the component. You can change the zoom ratio to zoom in or out the component.
47      .scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })
48      .zoomAccess(true)
49      .gesture(
50        // Bind the pinch gesture triggered by three fingers to the component.
51        PinchGesture({ fingers: 3 })
52          .onActionStart((event: GestureEvent|undefined) => {
53            console.info('Pinch start');
54          })
55            // Obtain the zoom ratio through the callback function when the pinch gesture is triggered, and then change the zoom ratio of the component.
56          .onActionUpdate((event: GestureEvent|undefined) => {
57            if(event){
58              this.scaleValue = this.pinchValue * event.scale;
59              console.info('Pinch start');
60            }
61          })
62          .onActionEnd(() => {
63            this.pinchValue = this.scaleValue;
64            console.info('Pinch end');
65          })
66      )
67    }
68  }
69}
70```
71![web-gesture-pinch.gif](figures/web-gesture-pinch.gif)
72
73## ArkWep Gesture Judgment
74- ArkUI gestures
75
76  ArkWeb consumes some ArkUI gestures, for example, [pan gesture](../ui/arkts-gesture-events-single-gesture.md#pan-gesture). If you want to process these gestures by yourself instead of ArkWeb, see [Gesture Judgment](../ui/arkts-gesture-events-gesture-judge.md).
77
78- ArkWeb gestures
79
80  ArkWeb gestures are generated after the **Web** component receives touch events. You can use either of the following methods to judge ArkWeb gestures:
81  1. Do not send touch events to the **Web** component. For details, see [Hit Testing](../ui/arkts-interaction-basic-principles.md#hit-testing).
82  2. Send the **TouchCancel** event to the **Web** component. For details, see [OH_ArkUI_TouchRecognizer_CancelTouch](../reference/apis-arkui/native__gesture_8h.md#functions).
83
84
85## FAQs
86
87### How do I disable the zoom gesture?
88The **Web** component provides the [zoomAccess](../reference/apis-arkweb/arkts-basic-components-web-attributes.md#zoomaccess) API to control whether to enable zooming. You can also use the **user-scalable** attribute on the web page to control zooming. For details, see [Zooming Web Pages](web-scale-zoom.md).
89### How do I enable the **Web** component to return to the previous web page following a swipe gesture?
90
91**Solution**
92
93Override the **onBackPress** API to define the return logic and use **WebviewController** to determine whether to return to the previous web page.
94
95**Example**
96
97```ts
98import web_webview from '@ohos.web.webview';
99@Entry
100@Component
101struct Index {
102  controller: web_webview.WebviewController = new web_webview.WebviewController();
103  build() {
104    Column() {
105      Web({ src: 'http://www.example.com', controller: this.controller })// Replace the URL with the actual URL.
106    }
107  }
108  onBackPress() {
109    // Check whether a specific number of steps forward or backward can be performed on the current page. A positive number indicates forward, and a negative number indicates backward.
110    if (this.controller.accessStep(-1)) {
111      this.controller.backward(); // Return to the previous web page.
112      // Execute the custom return logic.
113      return true
114    } else {
115      // Execute the default return logic to return to the previous page.
116      return false
117    }
118  }
119}
120```
121