Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
7ebb7c01
D
Docs
项目概览
OpenHarmony
/
Docs
大约 1 年 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
未验证
提交
7ebb7c01
编写于
10月 08, 2022
作者:
L
luoying_ace
提交者:
Gitee
10月 08, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md.
Signed-off-by:
N
luoying_ace
<
luoying19@huawei.com
>
上级
7620fabf
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
59 addition
and
20 deletion
+59
-20
zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
...lication-dev/reference/arkui-ts/ts-universal-mouse-key.md
+59
-20
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
浏览文件 @
7ebb7c01
# 鼠标事件
在单个动作触发多个事件时,事件的顺序是固定的,鼠标事件默认透传。
在
鼠标的
单个动作触发多个事件时,事件的顺序是固定的,鼠标事件默认透传。
> **说明:**
>
...
...
@@ -12,19 +12,19 @@
| 名称 | 支持冒泡 | 描述 |
| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
| onHover(event:
(isHover?:
boolean)
=
>
void) | 否 | 鼠标进入或退出组件时触发该回调。
<br/>
isHover:表示鼠标是否悬浮在组件上,鼠标进入时为true,
退出时为false。 |
| onMouse(event:
(event?:
MouseEvent)
=
>
void) | 是 | 当前组件被鼠标按键点击时或者鼠标在组件上
移动时,触发该回调,event参数包含触发事件时的时间戳、鼠标按键、动作、点击触点在整个屏幕上的坐标和点击触点
相对于当前组件的坐标。 |
| onMouse(event:
(event?:
MouseEvent)
=
>
void) | 是 | 当前组件被鼠标按键点击时或者鼠标在组件上
悬浮移动时,触发该回调,event返回值包含触发事件时的时间戳、鼠标按键、动作、鼠标位置在整个屏幕上的坐标和
相对于当前组件的坐标。 |
## MouseEvent对象说明
| 名称 | 属性类型 | 描述 |
| --------- | ------------------------------- | -------------------- |
| screenX | number |
点击触点
相对于应用窗口左上角的x轴坐标。 |
| screenY | number |
点击触点
相对于应用窗口左上角的y轴坐标。 |
| x | number |
点击触点
相对于当前组件左上角的x轴坐标。 |
| y | number |
点击触点
相对于当前组件左上角的y轴坐标。 |
| screenX | number |
鼠标位置
相对于应用窗口左上角的x轴坐标。 |
| screenY | number |
鼠标位置
相对于应用窗口左上角的y轴坐标。 |
| x | number |
鼠标位置
相对于当前组件左上角的x轴坐标。 |
| y | number |
鼠标位置
相对于当前组件左上角的y轴坐标。 |
| button |
[
MouseButton
](
ts-appendix-enums.md#mousebutton
)
| 鼠标按键。 |
| action |
[
MouseAction
](
ts-appendix-enums.md#mouseaction
)
|
事件
动作。 |
| action |
[
MouseAction
](
ts-appendix-enums.md#mouseaction
)
|
鼠标
动作。 |
| stopPropagation | () => void | 阻塞事件冒泡。 |
| timestamp
<sup>
8+
</sup>
| number | 事件时间戳。触发事件时距离系统启动的时间间隔,单位纳秒。 |
| target
<sup>
8+
</sup>
|
[
EventTarget
](
ts-universal-events-click.md
)
| 触发手势事件的元素对象显示区域。 |
...
...
@@ -37,31 +37,70 @@
@
Entry
@
Component
struct
MouseEventExample
{
@
State
hoverText
:
string
=
'
no hover
'
@
State
mouseText
:
string
=
'
MouseText
'
@
State
color
:
Color
=
Color
.
Blue
@
State
hoverText
:
string
=
'
no hover
'
;
@
State
mouseText
:
string
=
''
;
@
State
action
:
string
=
''
;
@
State
mouseBtn
:
string
=
''
;
@
State
color
:
Color
=
Color
.
Blue
;
build
()
{
Column
({
space
:
20
})
{
Column
({
space
:
20
})
{
Button
(
this
.
hoverText
)
.
width
(
180
).
height
(
80
)
.
backgroundColor
(
this
.
color
)
.
onHover
((
isHover
:
boolean
)
=>
{
// 通过onHover事件动态修改按钮在是否有鼠标悬浮时的文本内容与背景颜色
if
(
isHover
)
{
this
.
hoverText
=
'
on hover
'
this
.
color
=
Color
.
Pink
this
.
hoverText
=
'
hover
'
;
this
.
color
=
Color
.
Pink
;
}
else
{
this
.
hoverText
=
'
no hover
'
this
.
color
=
Color
.
Blue
this
.
hoverText
=
'
no hover
'
;
this
.
color
=
Color
.
Blue
;
}
})
.
backgroundColor
(
this
.
color
)
Button
(
'
onMouse
'
)
.
width
(
180
).
height
(
80
)
.
onMouse
((
event
:
MouseEvent
)
=>
{
console
.
log
(
this
.
mouseText
=
'
onMouse:
\n
Button =
'
+
event
.
button
+
'
\n
Action =
'
+
event
.
action
+
'
\n
localXY=(
'
+
event
.
x
+
'
,
'
+
event
.
y
+
'
)
'
+
'
\n
screenXY=(
'
+
event
.
screenX
+
'
,
'
+
event
.
screenY
+
'
)
'
)
switch
(
event
.
button
)
{
case
MouseButton
.
None
:
this
.
mouseBtn
=
'
None
'
;
break
;
case
MouseButton
.
Left
:
this
.
mouseBtn
=
'
Left
'
;
break
;
case
MouseButton
.
Right
:
this
.
mouseBtn
=
'
Right
'
;
break
;
case
MouseButton
.
Back
:
this
.
mouseBtn
=
'
Back
'
;
break
;
case
MouseButton
.
Forward
:
this
.
mouseBtn
=
'
Forward
'
;
break
;
case
MouseButton
.
Middle
:
this
.
mouseBtn
=
'
Middle
'
;
break
;
}
switch
(
event
.
action
)
{
case
MouseAction
.
Hover
:
this
.
action
=
'
Hover
'
;
break
;
case
MouseAction
.
Press
:
this
.
action
=
'
Press
'
;
break
;
case
MouseAction
.
Move
:
this
.
action
=
'
Move
'
;
break
;
case
MouseAction
.
Release
:
this
.
action
=
'
Release
'
;
break
;
}
this
.
mouseText
=
'
onMouse:
\n
Button =
'
+
this
.
mouseBtn
+
'
\n
Action =
'
+
this
.
action
+
'
\n
XY=(
'
+
event
.
x
+
'
,
'
+
event
.
y
+
'
)
'
+
'
\n
screenXY=(
'
+
event
.
screenX
+
'
,
'
+
event
.
screenY
+
'
)
'
;
})
Text
(
this
.
mouseText
)
}.
padding
({
top
:
2
0
}).
width
(
'
100%
'
)
}.
padding
({
top
:
3
0
}).
width
(
'
100%
'
)
}
}
```
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录