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"
/>
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self';
script-src 'self' 'unsafe-inline' 'unsafe-eval' https://unpkg.com blob:;
worker-src blob: 'self';
style-src 'self' 'unsafe-inline';
img-src 'self' data: blob:;
font-src 'self' blob:;
connect-src 'self' https://icraft.gantcloud.com blob:;
object-src 'none';
base-uri 'self';
form-action 'self';
frame-src 'self';
"
/>
<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.gantcloud.com/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
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
| onMouseMove | Mouse move event callback | (params: MouseEventParams) => void | undefined | false |
MouseEventParams
interface MouseEventParams {
instance: Element3D | null;
event: MouseEvent;
data: OptionsType | null;
}