|
|
@@ -1,42 +1,68 @@
|
|
|
let t = null
|
|
|
let r = null
|
|
|
let l = null
|
|
|
+
|
|
|
export function useMouseTooltip() {
|
|
|
- const u = (e) => {
|
|
|
- document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px')
|
|
|
- document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px')
|
|
|
+ // 🔥 修复：进入元素时 立刻更新位置 + 节流合并
|
|
|
+ const u = (e, instant = false) => {
|
|
|
+ // 切换元素时 → 强制立刻刷新
|
|
|
+ if (instant) {
|
|
|
+ document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px')
|
|
|
+ document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px')
|
|
|
+ }
|
|
|
+
|
|
|
clearTimeout(t)
|
|
|
t = setTimeout(() => {
|
|
|
document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px')
|
|
|
document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px')
|
|
|
}, 200)
|
|
|
}
|
|
|
- const clearMousePosition = () => {
|
|
|
+
|
|
|
+ const c = () => {
|
|
|
clearTimeout(t)
|
|
|
document.documentElement.style.removeProperty('--mouse-x')
|
|
|
document.documentElement.style.removeProperty('--mouse-y')
|
|
|
}
|
|
|
+
|
|
|
const i = () => {
|
|
|
+ // 鼠标移动 → 节流更新
|
|
|
r = (e) => {
|
|
|
if (e.target.closest('.cursor-pointer')) {
|
|
|
u(e)
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ // 鼠标进入新元素 → 🔥 立刻刷新位置（解决你说的问题）
|
|
|
+ const enter = (e) => {
|
|
|
+ if (e.target.closest('.cursor-pointer')) {
|
|
|
+ u(e, true) // 立刻更新
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 鼠标离开 → 延迟清除
|
|
|
l = (e) => {
|
|
|
if (e.target.closest('.cursor-pointer')) {
|
|
|
- clearMousePosition()
|
|
|
+ clearTimeout(t)
|
|
|
+ t = setTimeout(() => {
|
|
|
+ c()
|
|
|
+ }, 100)
|
|
|
}
|
|
|
}
|
|
|
- document.addEventListener('mouseenter', r, true)
|
|
|
- document.addEventListener('mouseleave', l, true)
|
|
|
+
|
|
|
+ document.addEventListener('mousemove', r, true)
|
|
|
+ document.addEventListener('mouseenter', enter, true) // 新增
|
|
|
+ document.addEventListener('mouseout', l, true)
|
|
|
}
|
|
|
+
|
|
|
const d = () => {
|
|
|
clearTimeout(t)
|
|
|
- if (r) document.removeEventListener('mouseenter', r, true)
|
|
|
- if (l) document.removeEventListener('mouseleave', l, true)
|
|
|
+ c()
|
|
|
+ if (r) document.removeEventListener('mousemove', r, true)
|
|
|
+ if (l) document.removeEventListener('mouseout', l, true)
|
|
|
r = null
|
|
|
l = null
|
|
|
}
|
|
|
+
|
|
|
i()
|
|
|
return d
|
|
|
}
|
