diff --git a/packages/core/src/player.ts b/packages/core/src/player.ts
index 2d76891..bd8a55b 100644
--- a/packages/core/src/player.ts
+++ b/packages/core/src/player.ts
@@ -2,6 +2,8 @@ import type { App, Ref } from "vue";
 import { inject, ref } from "vue";
 import { AnimationManager } from "./animation";
 
+const studioListenerAdded = { value: false };
+
 export function createPlayer(options: {
   studio?: boolean;
   fps?: number;
@@ -24,8 +26,11 @@ export function usePlayer() {
   const fps = inject("fps") as number;
   const playing = ref(false);
 
-  if (studio) {
-    document.addEventListener("click", () => {
+  if (studio && !studioListenerAdded.value) {
+    studioListenerAdded.value = true;
+    document.addEventListener("click", (e) => {
+      console.log(elapsed.value);
+      e.stopImmediatePropagation();
       elapsed.value += 1 / fps;
     });
   }
diff --git a/test/src/App.vue b/test/src/App.vue
index 62ef517..c44857a 100644
--- a/test/src/App.vue
+++ b/test/src/App.vue
@@ -17,7 +17,7 @@ const rect = useWidget<RectIns>();
 const line = useWidget<LineIns>();
 const arrow = useWidget<ArrowIns>();
 
-const { play } = usePlayer();
+const { play, elapsed } = usePlayer();
 
 onMounted(() => {
   rect.move(100, 100);
@@ -49,6 +49,10 @@ onMounted(() => {
   line.grow();
   arrow.grow();
   play();
+
+  document.addEventListener("click", () => {
+    console.log(elapsed.value);
+  });
 });
 </script>
 
diff --git a/test/src/main.ts b/test/src/main.ts
index 832067d..3cb1d54 100644
--- a/test/src/main.ts
+++ b/test/src/main.ts
@@ -3,4 +3,10 @@ import "./style.css";
 import { createPlayer } from "@vue-motion/core";
 import App from "./App.vue";
 
-createApp(App).use(createPlayer({})).mount("#app");
+createApp(App)
+  .use(
+    createPlayer({
+      studio: true,
+    }),
+  )
+  .mount("#app");