player-react
鼠标移动

鼠标移动事件

通过配置 onMouseMove 参数,你可以监听元素的鼠标移动事件并执行相应的回调函数。

使用示例

以下是一个展示如何使用 iCraft Player 组件处理元素鼠标移动事件的示例。

MouseMoved:
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) => voidundefined

MouseEventParams

interface MouseEventParams {
  instance: Element3D | null;  // 当前元素实例
  event: MouseEvent;          // 原生鼠标事件对象
  data: OptionsType | null;   // 元素相关数据
}