鼠标移动事件
通过配置 onMouseMove 参数,你可以监听元素的鼠标移动事件并执行相应的回调函数。
使用示例
以下是一个展示如何使用 iCraft Player 组件处理元素鼠标移动事件的示例。
import React, { useState } from "react";
import { MouseEventParams, ICraftPlayer } from "@icraft/player-react";
export default () => {
const [mouseMoved, setMouseMoved] = useState<string>();
const onMouseMove = (e: MouseEventParams) => {
console.log(e);
const { instance: element, data } = e;
if (element) {
element.active();
}
setMouseMoved(data?.name || "");
};
return (
<div style={style}>
<ICraftPlayer
src='/templates/AWSCloud.iplayer'
onMouseMove={onMouseMove}
/>
<div style={textStyle}>鼠标移动到: {mouseMoved}</div>
</div>
);
};
const style = {
width: "100%",
height: "100%",
position: "relative" as const,
overflow: "hidden" as const,
};
const textStyle = {
position: "absolute" as const,
bottom: 10,
right: 10,
};API
| 属性 | 说明 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| onMouseMove | 鼠标移动事件回调 | (params: MouseEventParams) => void | undefined | 否 |
MouseEventParams
interface MouseEventParams {
instance: Element3D | null; // 当前元素实例
event: MouseEvent; // 原生鼠标事件对象
data: OptionsType | null; // 元素相关数据
}