diff --git a/src/views/tunnel/polygon-demo.vue b/src/views/tunnel/polygon-demo.vue index 676d741..7f92786 100644 --- a/src/views/tunnel/polygon-demo.vue +++ b/src/views/tunnel/polygon-demo.vue @@ -6,14 +6,12 @@ - -
@@ -445,26 +443,50 @@ onMounted(() => {
const pts = [{x:50,y:50},{x:300,y:80}];
const str = pts.map(p => `${p.x},${p.y}`).join(' ');
-nextTick(()=>{
-
- // document.getElementById('poly1').setAttribute('points', str);
-
+// 修改mouseenter和mouseout事件处理,使用防抖和更精确的检测
+nextTick(() => {
const area1 = document.getElementById("area0");
- // const area2 = document.getElementById("area2");
- area1.addEventListener("mouseenter", e => {
- console.log("鼠标移动在区域0", e.clientX, e.clientY);
- showAarea10.value=true
- });
- area1.addEventListener("mouseout", e => {
- console.log("鼠标移动在区域0", e.clientX, e.clientY);
- showAarea10.value=false
- });
+ // 添加防抖标志,避免频繁切换
+ let hoverTimeout = null;
+ let isHovered = false;
+
+ if (area1) {
+ area1.addEventListener("mouseenter", e => {
+ console.log("鼠标进入区域0", e.clientX, e.clientY);
+ // 清除之前的定时器
+ if (hoverTimeout) {
+ clearTimeout(hoverTimeout);
+ }
+
+ // 设置hover状态
+ isHovered = true;
+ showAarea10.value = true;
+ });
+
+ area1.addEventListener("mousemove", e => {
+ // 鼠标在区域内移动时保持显示状态
+ if (!isHovered) {
+ isHovered = true;
+ showAarea10.value = true;
+ }
+ });
+
+ area1.addEventListener("mouseleave", e => {
+ console.log("鼠标离开区域0", e.clientX, e.clientY);
+ // 设置延迟隐藏,避免闪动
+ if (hoverTimeout) {
+ clearTimeout(hoverTimeout);
+ }
+
+ hoverTimeout = setTimeout(() => {
+ isHovered = false;
+ showAarea10.value = false;
+ }, 100); // 100ms延迟
+ });
+ }
+});
- // area2.addEventListener("mouseenter", () => {
- // console.log("鼠标进入区域2");
- // });
-})
function convertCoordsToArray(coordsArray) {
return coordsArray.map(point => `${point.x},${point.y}`).join(',');