player-javascript
Mouse Move

Mouse Move Events

By configuring the onMouseMove parameter, you can listen to element mouse move events and execute corresponding callback functions.

Usage Example

Below is an example showing how to handle element mouse move events with the iCraft Player component.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
 
    <title>ICraft Player Click Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #container {
        width: 100%;
        height: 100vh;
        position: relative;
      }
      #text {
        position: absolute;
        bottom: 10px;
        right: 10px;
      }
    </style>
    <script src="https://unpkg.com/@icraft/player@latest/dist/umd/icraft-player.min.js"></script>
  </head>
  <body>
    <div id="container">
      <div id="text"></div>
    </div>
  </body>
  <script>
    const player = new ICraftPlayer({
      src: "https://icraft.design/api/static/templates/AWSCloud.iplayer",
      container: document.getElementById("container"),
      onMouseMove: (e) => {
        console.log(e);
        const { instance: element } = e;
        const name = element?.options?.name || "";
        document.getElementById("text").innerText = "Mouse Moved:" + name;
      },
    });
  </script>
</html>
 

API

NameDescriptionTypeDefaultRequired
onMouseMoveMouse move event callback(params: MouseEventParams) => voidundefinedfalse

MouseEventParams

interface MouseEventParams {
  instance: Element3D | null;
  event: MouseEvent;
  data: OptionsType | null;
}