未验证 提交 49d59220 编写于 作者: O openharmony_ci 提交者: Gitee

!19026 hover事件支持冒泡拦截以及被遮盖组件不影响hover事件

Merge pull request !19026 from huangdong/RM024_hover
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
| 名称 | 支持冒泡 | 描述 | | 名称 | 支持冒泡 | 描述 |
| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
| onHover(event:&nbsp;(isHover?:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | 否 | 鼠标进入或退出组件时触发该回调。<br/>isHover:表示鼠标是否悬浮在组件上,鼠标进入时为true,&nbsp;退出时为false。 | | onHover(event:&nbsp;(isHover?:&nbsp;boolean,&nbsp;event<sup>10+</sup>?:&nbsp;HoverEvent)&nbsp;=&gt;&nbsp;void) | 是 | 鼠标进入或退出组件时触发该回调。<br/>isHover:表示鼠标是否悬浮在组件上,鼠标进入时为true,&nbsp;退出时为false。<br/>event:设置阻塞事件冒泡属性。 |
| onMouse(event:&nbsp;(event?:&nbsp;MouseEvent)&nbsp;=&gt;&nbsp;void) | 是 | 当前组件被鼠标按键点击时或者鼠标在组件上悬浮移动时,触发该回调,event返回值包含触发事件时的时间戳、鼠标按键、动作、鼠标位置在整个屏幕上的坐标和相对于当前组件的坐标。 | | onMouse(event:&nbsp;(event?:&nbsp;MouseEvent)&nbsp;=&gt;&nbsp;void) | 是 | 当前组件被鼠标按键点击时或者鼠标在组件上悬浮移动时,触发该回调,event返回值包含触发事件时的时间戳、鼠标按键、动作、鼠标位置在整个屏幕上的坐标和相对于当前组件的坐标。 |
...@@ -34,6 +34,12 @@ ...@@ -34,6 +34,12 @@
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8对象说明) | 触发事件的元素对象显示区域。 | | target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8对象说明) | 触发事件的元素对象显示区域。 |
| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md#sourcetype枚举说明) | 事件输入设备。 | | source<sup>8+</sup> | [SourceType](ts-gesture-settings.md#sourcetype枚举说明) | 事件输入设备。 |
## HoverEvent<sup>10+</sup>对象说明
| 名称 | 属性类型 | 描述 |
| --------- | ------------------------------- | -------------------- |
| stopPropagation | () => void | 阻塞事件冒泡。 |
## 示例 ## 示例
```ts ```ts
...@@ -52,7 +58,7 @@ struct MouseEventExample { ...@@ -52,7 +58,7 @@ struct MouseEventExample {
Button(this.hoverText) Button(this.hoverText)
.width(180).height(80) .width(180).height(80)
.backgroundColor(this.color) .backgroundColor(this.color)
.onHover((isHover: boolean) => { .onHover((isHover: boolean, event: HoverEvent) => {
// 通过onHover事件动态修改按钮在是否有鼠标悬浮时的文本内容与背景颜色 // 通过onHover事件动态修改按钮在是否有鼠标悬浮时的文本内容与背景颜色
if (isHover) { if (isHover) {
this.hoverText = 'hover'; this.hoverText = 'hover';
...@@ -117,4 +123,4 @@ struct MouseEventExample { ...@@ -117,4 +123,4 @@ struct MouseEventExample {
鼠标点击时: 鼠标点击时:
![mouse1](figures/mouse1.png) ![mouse1](figures/mouse1.png)
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册