Skip to content

Commit e55a900

Browse files
rAY-oootoretto-wt
authored andcommitted
Improve the descriptions related to the event and exposure.
Change-Id: I7cbf29b0f6c63ce5eccff5f6af881190be20b080
1 parent 5759264 commit e55a900

File tree

7 files changed

+142
-44
lines changed

7 files changed

+142
-44
lines changed

docs/en/api/elements/built-in/view.mdx

Lines changed: 41 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ Only available on Android platform, used to force specific nodes to create corre
9999
exposure-id?: string
100100
```
101101

102-
Specify whether the target node needs to listen to [exposure/anti-exposure events](../../../guide/interaction/visibility-detection/exposure-ability.mdx#monitor-exposure-of-the-entire-page).
102+
Specify whether the target node needs to listen to [exposure/disexposure events](../../../guide/interaction/visibility-detection/exposure-ability.mdx#monitor-exposure-of-the-entire-page).
103103

104104
### `exposure-scene`
105105

@@ -122,7 +122,9 @@ exposure-ui-margin-left?: string;
122122

123123
Specify the boundary scaling value of the target node itself in the exposure detection, which affects the viewport intersection judgment of the target node. Each node can have its own boundary scaling value.
124124

125-
Before using this capability, you also need to set [`enable-exposure-ui-margin`](#enable-exposure-ui-margin) for the current node.
125+
:::tip
126+
On both Android and iOS platforms, you need to set [`enable-exposure-ui-margin`](#enable-exposure-ui-margin) for the current node; otherwise, it won't take effect. On the HarmonyOS platform, setting [`enable-exposure-ui-margin`](#enable-exposure-ui-margin) is not required for it to take effect.
127+
:::
126128

127129
### `exposure-screen-margin-*`
128130

@@ -136,6 +138,10 @@ exposure-screen-margin-left?: string;
136138

137139
Specify the screen boundary scaling value referenced by the target node in the exposure detection task, which affects the viewport intersection judgment of the target node. Each node can have its own screen boundary scaling value.
138140

141+
:::tip
142+
On both Android and iOS platforms, you need to set [`enable-exposure-ui-margin`](#enable-exposure-ui-margin) for the current node; otherwise, a positive value represents the scaling value of the target node's own boundaries, and a negative value represents the scaling value of the screen boundaries. On the HarmonyOS platform, setting [`enable-exposure-ui-margin`](#enable-exposure-ui-margin) is not required for it to take effect.
143+
:::
144+
139145
### `exposure-area`
140146

141147
```ts
@@ -154,7 +160,9 @@ enable-exposure-ui-margin?: boolean
154160

155161
Specify whether the target node supports the [`exposure-ui-margin-*`](#exposure-ui-margin-) properties.
156162

157-
Setting it to `true` will change the behavior of [`exposure-screen-margin-*`](#exposure-screen-margin-) and may cause the lazy loading of the scrollable container to fail.
163+
:::tip
164+
Setting this to `true` will change the behavior of `exposure-screen-margin-*` on Android and iOS platforms, potentially causing lazy loading of scrollable containers to fail.
165+
:::
158166

159167
### `enable-exposure-ui-clip`
160168

@@ -165,6 +173,10 @@ enable-exposure-ui-clip?: boolean
165173

166174
Specify whether the exposure detection task takes into account the viewport clipping of the parent node. When set to `true`, nodes outside the parent node viewport cannot trigger exposure, and when set to `false`, nodes outside the parent node viewport can trigger exposure.
167175

176+
:::tip
177+
By default, exposure detection only considers the viewport clipping of scrollable parent nodes. The viewport clipping of other parent nodes with width and height and `overflow: visible` has no effect on exposure detection. Setting `enable-exposure-ui-clip` for these parent nodes allows for more accurate viewport clipping determination.
178+
:::
179+
168180
<img
169181
src="https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/enable-exposure-ui-clip-en.png"
170182
width="100%"
@@ -333,6 +345,10 @@ user-interaction-enabled?: boolean
333345

334346
Specifies whether the target node and its child nodes can respond to Lynx touch events. This property does not affect platform-level gestures (such as scrolling of `scroll-view`).
335347

348+
:::tip
349+
It is recommended to use [`pointer-events`](../../css/properties/pointer-events.mdx) instead of `user-interaction-enabled`.
350+
:::
351+
336352
### `native-interaction-enabled`
337353

338354
```ts
@@ -343,9 +359,9 @@ native-interaction-enabled?: boolean
343359
Specify whether the target node consumes platform-layer touch events, affects platform-layer gestures (such as scrolling of `scroll-view`), does not affect Lynx touch events, and can achieve similar platform-layer gesture penetration/interception effects.
344360

345361
:::tip
346-
On the Android side, only supports setting effectiveness on the `view` element.
362+
On the Android platform, this setting only applies to `view` elements, and the corresponding Android View needs to be created for the node to take effect. It may also require setting [`flatten`](#flatten) to `false` for it to work.
347363

348-
Known differences between the two sides: Android and HarmonyOS support platform-layer gesture penetration/interception of parent-child/sibling structures; iOS only supports platform-layer gesture penetration/interception of sibling structures.
364+
Gesture interception effects only apply to sibling nodes, not parent-child nodes.
349365
:::
350366

351367
### `block-native-event`
@@ -521,7 +537,9 @@ tap: TouchEvent;
521537

522538
It belongs to [touch event](../../lynx-api/event/touch-event), which is triggered when the finger clicks on the touch surface.
523539

540+
:::tip
524541
This event and the [`longpress`](#longpress) event are mutually exclusive in event monitoring, that is, if the front-end monitors both events at the same time, the two events will not be triggered at the same time, and [`longpress`](#longpress) takes precedence.
542+
:::
525543

526544
### `longpress`
527545

@@ -531,6 +549,23 @@ longpress: TouchEvent;
531549

532550
It belongs to the [touch event](../../lynx-api/event/touch-event), which is triggered when the finger is long pressed on the touch surface, and the interval between long press triggers is `500 ms`.
533551

552+
### `click`
553+
554+
```ts
555+
click: TouchEvent;
556+
```
557+
558+
This belongs to the [touch event](../../lynx-api/event/touch-event), triggered when a finger clicks on the touch surface.
559+
560+
:::tip
561+
This event differs slightly from the [`tap`](#tap) event, mainly in the trigger distance threshold and the triggering object.
562+
563+
- The distance threshold for `tap` is fixed; it cannot be triggered if the movement distance exceeds a certain value. The distance threshold for `click` depends on the node's touch hotspot; it cannot be triggered if the node moves outside the touch hotspot.
564+
565+
- The triggering object for `tap` is the node closest to the user that is actually touched. The triggering object for `click` is the node closest to the user that is listening for the `click` event.
566+
567+
:::
568+
534569
### `layoutchange`
535570

536571
```ts
@@ -624,6 +659,7 @@ lynx
624659
.invoke({
625660
method: 'boundingClientRect',
626661
params: {
662+
iOSEnableAnimationProps: false, // Specifies whether to consider animation properties when calculating position on iOS; the default is false.
627663
androidEnableTransformProps: true, // Specifies whether to consider the transform attribute when calculating the position on Android. The default value is false.
628664
relativeTo: null, // Specify the reference node, relative to LynxView by default.
629665
},

docs/en/api/lynx-api/event/mouse-event.mdx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,15 @@ When a mouse event is triggered, if any buttons are pressed, a integer value rep
3838
x: number;
3939
```
4040

41-
Represents the horizontal axis position of the mouse pointer in the `UI` coordinate system that contains the mouse pointer and is closest to the user.
41+
Represents the horizontal axis position of the mouse pointer in the `element` coordinate system that contains the mouse pointer and is closest to the user.
4242

4343
### y
4444

4545
```ts
4646
y: number;
4747
```
4848

49-
Represents the vertical axis position of the mouse pointer in the `UI` coordinate system that contains the mouse pointer and is closest to the user.
49+
Represents the vertical axis position of the mouse pointer in the `element` coordinate system that contains the mouse pointer and is closest to the user.
5050

5151
### pageX
5252

@@ -84,31 +84,31 @@ Indicates the vertical axis position of the mouse pointer in the current window
8484

8585
### mousedown
8686

87-
Indicates a mouse button is pressed (primary or secondary). [`target`](./event#target) is the `UI` closest to the user that contains the mouse pointer.
87+
Indicates a mouse button is pressed (primary or secondary). [`target`](./event#target) is the `element` closest to the user that contains the mouse pointer.
8888

8989
### mousemove
9090

91-
Indicates that the mouse moves after `mousedown`. [`target`](./event#target) is always the same as [`target`](./event#target) of `mousedown`.
91+
Indicates that the mouse moves after [`mousedown`](#mousedown). [`target`](./event#target) is always the same as [`mousedown`](#mousedown)'s [`target`](./event#target).
9292

9393
### mouseup
9494

95-
Indicates that the mouse button is released, [`target`](./event#target) is the same as `mousedown`'s [`target`](./event#target).
95+
Indicates that the mouse button is released, [`target`](./event#target) is the same as [`mousedown`](#mousedown)'s [`target`](./event#target).
9696

9797
### mouseenter
9898

99-
Indicates that the mouse moves into the activation area of [`target`](./event#target) for the first time. [`target`](./event#target) is the `UI` that contains the mouse pointer and is closest to the user.
99+
Indicates that the mouse moves into the activation area of [`target`](./event#target) for the first time. [`target`](./event#target) is the `element` that contains the mouse pointer and is closest to the user.
100100

101-
Note: the `mouseenter` event does not bubble, and it can't be captured by using `capture-` API.
101+
Note: the `mouseenter` event does not bubble, and it can't be captured by using [`capture-`](../../../guide/interaction/event-handling/event-propagation.mdx#event-handler-property) API.
102102

103103
### mouseover
104104

105-
Indicates that the mouse is moving inside [`target`](./event#target) after `mouseenter`. [`target`](./event#target) is the `UI` that contains the mouse pointer and is closest to the user.
105+
Indicates that the mouse is moving inside [`target`](./event#target) after [`mouseenter`](#mouseenter). [`target`](./event#target) is the `element` that contains the mouse pointer and is closest to the user.
106106

107107
### mouseleave
108108

109-
Indicates that the mouse moves out of the activation area of [`target`](./event#target) for the first time. [`target`](./event#target) is the same as previous `mouseenter`.
109+
Indicates that the mouse moves out of the activation area of [`target`](./event#target) for the first time. [`target`](./event#target) is the same as previous [`mouseenter`](#mouseenter)'s [`target`](./event#target).
110110

111-
Note: the `mouseleave` event does not bubble, and it can't be captured by using `capture-` API.
111+
Note: the `mouseleave` event does not bubble, and it can't be captured by using [`capture-`](../../../guide/interaction/event-handling/event-propagation.mdx#event-handler-property) API.
112112

113113
## Compatibility
114114

docs/en/api/lynx-api/event/touch-event.mdx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,13 +68,17 @@ Indicates that the touch event is interrupted by the system or `Lynx` external g
6868

6969
### tap
7070

71-
Indicates that the finger clicks on the touch surface. [`target`](./event#target) is the `element` that contains the touch point and is closest to the user. Only the first finger can trigger it. When the finger moves beyond a certain threshold or triggers the `UI` at the touch position to slide, the `tap` event cannot be triggered.
71+
This indicates a single tap on the touch surface. The [`target`](./event#target) is the `element` containing the touch point and closest to the user. Only the first finger can trigger this event. If the finger moves beyond a certain threshold, or if an `element` in the [`event response chain`](../../../guide/interaction/event-handling/event-propagation.mdx#event-response-chain) slides, the `tap` event will not trigger.
7272

73-
In addition, this event and the [`longpress`](#longpress) event are mutually exclusive in event monitoring. That is, if the front end monitors two events at the same time, the two events will not be triggered at the same time, and [`longpress`](#longpress) takes priority.
73+
Furthermore, this event and the [`longpress`](#longpress) event are mutually exclusive in event listening. That is, if the front-end listens for both events simultaneously, they will not trigger concurrently; [`longpress`](#longpress) takes precedence.
7474

7575
### longpress
7676

77-
Indicates that the finger long presses on the touch surface. [`target`](./event#target) is the `element` that contains the touch point and is closest to the user. The interval for long press triggering is `500 ms`.
77+
This indicates a long press on the touch surface. The [`target`](./event#target) is the `element` containing the touch point and closest to the user. Only the first finger can trigger this event. The `longpress` event will not trigger if the finger moves beyond a certain threshold or the long press interval is less than `500 ms`.
78+
79+
### click
80+
81+
This indicates a single click on the touch plane. [`target`](./event#target) is the `element` containing the touch point, closest to the user, and listening for the `click` event. Only the first finger can trigger this event. Unlike the [`tap`](#tap) event, the `click` event will not trigger if the finger moves away from the `element` closest to the user and listening for the `click` event, or if an `element` in the [`event response chain`](../../../guide/interaction/event-handling/event-propagation.mdx#event-response-chain) of that `element` slides.
7882

7983
## Compatibility
8084

docs/zh/api/elements/built-in/view.mdx

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,9 @@ exposure-ui-margin-left?: string;
122122

123123
指定曝光检测中目标节点自身的边界缩放值,影响目标节点的视口交叉判断,每一个节点可以有自己的自身边界缩放值。
124124

125-
在使用此能力前,也需要对当前节点设置 [`enable-exposure-ui-margin`](#enable-exposure-ui-margin)
125+
:::tip
126+
Android 和 iOS 平台都需要对当前节点设置 [`enable-exposure-ui-margin`](#enable-exposure-ui-margin),否则不生效。HarmonyOS 平台不需要设置[`enable-exposure-ui-margin`](#enable-exposure-ui-margin) 即可生效。
127+
:::
126128

127129
### `exposure-screen-margin-*`
128130

@@ -136,6 +138,10 @@ exposure-screen-margin-left?: string;
136138

137139
指定曝光检测任务中目标节点参考的屏幕边界缩放值,影响目标节点的视口交叉判断,每一个节点可以有自己的屏幕边界缩放值。
138140

141+
:::tip
142+
Android 和 iOS 平台都需要对当前节点设置 [`enable-exposure-ui-margin`](#enable-exposure-ui-margin),否则正值表示目标节点自身边界缩放值,负值表示屏幕边界缩放值。HarmonyOS 平台不需要设置[`enable-exposure-ui-margin`](#enable-exposure-ui-margin) 即可生效。
143+
:::
144+
139145
### `exposure-area`
140146

141147
```ts
@@ -154,7 +160,9 @@ enable-exposure-ui-margin?: boolean
154160

155161
指定目标节点是否支持 [`exposure-ui-margin-*`](#exposure-ui-margin-) 属性。
156162

157-
设置为 `true` 会改变 [`exposure-screen-margin-*`](#exposure-screen-margin-) 的行为,可能导致可滚动容器的懒加载失效。
163+
:::tip
164+
设置为 `true` 会改变 Android 和 iOS 平台 [`exposure-screen-margin-*`](#exposure-screen-margin-) 的行为,可能导致可滚动容器的懒加载失效。
165+
:::
158166

159167
### `enable-exposure-ui-clip`
160168

@@ -165,6 +173,10 @@ enable-exposure-ui-clip?: boolean
165173

166174
指定曝光检测任务中是否考虑父节点的视口裁剪。当设置为 `true` 时,父节点视口外的节点无法触发曝光,当设置为 `false` 时,父节点视口外的节点可以触发曝光。
167175

176+
:::tip
177+
默认情况下,曝光检测只考虑可滚动的父级节点的视口裁剪,其他有宽高且 overflow: visible 的父级节点视口裁剪对曝光检测无影响。通过给这些父级节点设置 `enable-exposure-ui-clip` 可以实现更加合理的视口裁剪判断。
178+
:::
179+
168180
<img
169181
src="https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/enable-exposure-ui-clip-en.png"
170182
width="100%"
@@ -333,6 +345,10 @@ user-interaction-enabled?: boolean
333345

334346
指定目标节点及其子节点是否能够响应 Lynx 的触摸事件,该属性不会影响平台层手势(比如 `scroll-view` 的滚动)。
335347

348+
:::tip
349+
推荐使用 [`pointer-events`](../../css/properties/pointer-events.mdx) 代替 `user-interaction-enabled`
350+
:::
351+
336352
### `native-interaction-enabled`
337353

338354
```ts
@@ -343,9 +359,9 @@ native-interaction-enabled?: boolean
343359
指定目标节点是否消费平台层的触摸事件,影响平台层手势(比如 `scroll-view` 的滚动),不影响 Lynx 的触摸事件,可以实现类似平台层手势穿透/拦截的效果。
344360

345361
:::tip
346-
Android 端,只支持在 `view` 元件上设置生效。
362+
Android 平台只支持在 `view` 元件上设置生效,并且需要节点创建对应的 Android View,可能需要同时设置 [`flatten`](#flatten)`false` 才能生效
347363

348-
已知的双端差异:Android/HarmonyOS 端支持父子/兄弟结构的平台层手势穿透/拦截;iOS 端只支持兄弟结构的平台层手势穿透/拦截
364+
手势拦截效果只能作用于兄弟节点,不能作用于父子节点
349365
:::
350366

351367
### `block-native-event`
@@ -364,7 +380,7 @@ block-native-event?: boolean
364380
block-native-event-areas?: [string, string, string, string][]
365381
```
366382

367-
指定阻止 Lynx 外平台层手势的触摸区域,当目标节点在[事件响应链](../../../guide/interaction/event-handling/event-propagation.mdx#事件响应链)上并且触摸在目标节点的指定区域时,平台层手势将被阻止,可以实现类似阻止平台层侧滑返回的效果。
383+
指定阻止 Lynx 外平台层手势生效的触摸区域,当目标节点在[事件响应链](../../../guide/interaction/event-handling/event-propagation.mdx#事件响应链)上并且触摸在目标节点的指定区域时,平台层手势将被阻止,可以实现类似阻止平台层侧滑返回的效果。
368384

369385
该二维数组内是若干个包含 `4` 个元素的数组,`4` 个元素依次为 `x``y``width``height`,单位为 `px``%`,表示触摸区域在目标节点中的位置和宽高。
370386

@@ -525,7 +541,9 @@ tap: TouchEvent;
525541

526542
属于[触摸事件](../../lynx-api/event/touch-event),手指在触摸平面上单击时触发。
527543

544+
:::tip
528545
该事件和 [`longpress`](#longpress) 事件在事件监听上互斥,即前端同时监听两个事件,则两个事件不会同时触发,[`longpress`](#longpress) 优先。
546+
:::
529547

530548
### `longpress`
531549

@@ -535,6 +553,22 @@ longpress: TouchEvent;
535553

536554
属于[触摸事件](../../lynx-api/event/touch-event),手指在触摸平面上长按时触发,长按触发的间隔为 `500 ms`
537555

556+
### `click`
557+
558+
```ts
559+
click: TouchEvent;
560+
```
561+
562+
属于[触摸事件](../../lynx-api/event/touch-event),手指在触摸平面上单击时触发。
563+
564+
:::tip
565+
该事件和 [`tap`](#tap) 事件稍微有区别,主要在于事件的触发距离阈值和触发对象不同。
566+
567+
- `tap` 的距离阈值是固定的,移动距离超过某个值后无法触发;而 `click` 的距离阈值取决于节点的触摸热区,移动出触摸热区后无法触发。
568+
- `tap` 的触发对象是实际触摸的距离用户最近的节点;而 `click` 的触发对象是距离用户最近且监听了 `click` 事件的节点。
569+
570+
:::
571+
538572
### `layoutchange`
539573

540574
```ts
@@ -628,6 +662,7 @@ lynx
628662
.invoke({
629663
method: 'boundingClientRect',
630664
params: {
665+
iOSEnableAnimationProps: false, // 指定 iOS 上计算位置时是否考虑 animation 属性,默认为 false
631666
androidEnableTransformProps: true, // 指定 Android 上计算位置时是否考虑 transform 属性,默认为 false
632667
relativeTo: null, // 指定参考节点,默认相对于 LynxView
633668
},

0 commit comments

Comments
 (0)