| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 |
- let t = null
- let r = null
- let l = null
- export function useMouseTooltip() {
- // 🔥 修复:进入元素时 立刻更新位置 + 节流合并
- 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 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')) {
- clearTimeout(t)
- t = setTimeout(() => {
- c()
- }, 100)
- }
- }
- document.addEventListener('mousemove', r, true)
- document.addEventListener('mouseenter', enter, true) // 新增
- document.addEventListener('mouseout', l, true)
- }
- const d = () => {
- clearTimeout(t)
- c()
- if (r) document.removeEventListener('mousemove', r, true)
- if (l) document.removeEventListener('mouseout', l, true)
- r = null
- l = null
- }
- i()
- return d
- }
|