Lynx

MouseEvent

表示鼠标事件,继承自 Event,是一类描述用户与鼠标交互行为的事件。比如鼠标单击等。

Info

从 Lynx 3.8 起,可以在 pageConfig 中开启 MouseEvent 与 W3C Web 标准对齐的行为。

// pageConfig
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';

pluginReactLynx({
  alignMouseEventWithW3C: true,
});

实例属性

button

button: number;

开启 alignMouseEventWithW3C 后,当鼠标事件触发时,如果有任意鼠标按键被按下或松开,将会返回一个代表该键的数值。例如用户按下左键时,mousedown 触发,该参数值为 0。数值代表的含义见下表。

含义
0主键(通常是左键)
1中键
2次键(通常是右键)

buttons

buttons: number;

开启 alignMouseEventWithW3C 后,当鼠标事件触发时,如果有一个或多个鼠标按键被按下,将会返回一个数值,每个 bit 代表一个鼠标按键, 被按下的键对应的 bit 将会置为 1。

Bit含义
0主键(通常是左键)
1次键(通常是右键)
2中键

x

x: number;

表示鼠标指针相对距离用户最近的 element 元素的 X 轴坐标。

y

y: number;

表示鼠标指针相对距离用户最近的 element 元素的 Y 轴坐标。

pageX

pageX: number;

表示鼠标指针在当前 LynxView 坐标系下的 X 轴坐标。

pageY

pageY: number;

表示鼠标指针在当前 LynxView 坐标系下的 Y 轴坐标。

clientX

clientX: number;

表示鼠标指针在当前窗口坐标系下的 X 轴位置。

clientY

clientY: number;

表示鼠标指针在当前窗口坐标系下的 Y 轴位置。

MouseEvent 的类型

mousedown

表示鼠标按键按下(主键或次键),target 是包含鼠标指针且距离用户最近的 element

mousemove

表示鼠标指针在元素上移动,target 是包含鼠标指针且距离用户最近的 element

mouseup

表示鼠标在元素上释放,target 是包含鼠标指针且距离用户最近的 element

mouseenter

表示鼠标首次移动到 target 的激活区域内,target 是包含鼠标指针且距离用户最近的 element

注意: mouseenter 事件不会冒泡,也无法使用 capture- API捕获。

mouseover

表示鼠标指针移动到 target 或其子元素上。target 是包含鼠标指针且距离用户最近的 element

mouseleave

表示鼠标首次移出 target 的激活区域内,target 是鼠标指针刚离开的 element

注意: mouseleave 事件不会冒泡,也无法使用 capture- API捕获。

兼容性

LCD tables only load in the browser

除非另有说明,本项目采用知识共享署名 4.0 国际许可协议进行许可,代码示例采用 Apache License 2.0 许可协议进行许可。