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 @@ - -
+ fill="rgba(0,150,255,0.3)" stroke="#0077cc" stroke-width="2" @click="clickHot(98,0)" style="cursor: pointer; pointer-events: auto;"/> @@ -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(',');