src/renderer/src/components/whiteboard/whiteboard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="whiteboart-container" :style="{ height: height + 'px' }">
-    <div class="canvasBox" ref="box"  @mouseleave="handleMouseLeave" ></div>
+    <div class="canvasBox" ref="box"  @mouseenter.capture="handleMouseEnter" @mouseleave.capture="handleMouseLeave"></div>
 
     <div class="footerLeft" @click.stop
       :style="type == 'design' ? ['top: 10px', 'justify-content: space-between'] : ['bottom: 10px', 'justify-content: center']">
@@ -278,7 +278,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref, getCurrentInstance, watch, toRaw, nextTick, computed, reactive, defineProps, defineEmits } from 'vue'
+import { onMounted, onBeforeUnmount, ref, getCurrentInstance, watch, toRaw, nextTick, computed, reactive, defineProps, defineEmits } from 'vue'
 import TinyWhiteboard from 'whiteboard_lyc'
 import ColorPicker from './components/ColorPicker.vue'
 import {
@@ -791,6 +791,25 @@ const init = () => {
   })
 }
 
+
+
+const isMyCanvas = ref(false); // 鼠标 是否进入画布判断
+const handleKeyDown=(event)=> {
+  // console.log('键盘按键被按下:', event.key);
+  // console.log(isMyCanvas.value,'??????????')
+  if(isMyCanvas.value == false){
+    event.stopPropagation();
+    // console.log('键盘事件被捕获，已阻止冒泡:', event.key);
+  }
+}
+/**
+ * 鼠标进入事件
+ */
+const handleMouseEnter = () => {
+  console.log('进入白板')
+  isMyCanvas.value = true;
+  document.addEventListener('keydown', handleKeyDown, true);
+}
 /**
  * 课堂展示-鼠标离开白板监听事件：该事件是避免，选中状态，在其他地方点击、后退、删除等事件，会删除白板内选中的元素
  */
@@ -798,7 +817,10 @@ const handleMouseLeave = () => {
   console.log('离开白板')
   // 清除激活项--点击事件的激活项
   app.cancelActiveElement()
-  // TODO 缺失点击拖动范围的取消激活项……
+  // 阻止 点击拖动范围的取消激活项……
+  isMyCanvas.value = false;
+  // 确保事件处理函数在组件挂载后绑定
+  document.addEventListener('keydown', handleKeyDown, true);
 };
 
 // 暴露方法