useMouseTooltip.js 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. let t = null
  2. let r = null
  3. let l = null
  4. export function useMouseTooltip() {
  5. // 🔥 修复:进入元素时 立刻更新位置 + 节流合并
  6. const u = (e, instant = false) => {
  7. // 切换元素时 → 强制立刻刷新
  8. if (instant) {
  9. document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px')
  10. document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px')
  11. }
  12. clearTimeout(t)
  13. t = setTimeout(() => {
  14. document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px')
  15. document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px')
  16. }, 200)
  17. }
  18. const c = () => {
  19. clearTimeout(t)
  20. document.documentElement.style.removeProperty('--mouse-x')
  21. document.documentElement.style.removeProperty('--mouse-y')
  22. }
  23. const i = () => {
  24. // 鼠标移动 → 节流更新
  25. r = (e) => {
  26. if (e.target.closest('.cursor-pointer')) {
  27. u(e)
  28. }
  29. }
  30. // 鼠标进入新元素 → 🔥 立刻刷新位置(解决你说的问题)
  31. const enter = (e) => {
  32. if (e.target.closest('.cursor-pointer')) {
  33. u(e, true) // 立刻更新
  34. }
  35. }
  36. // 鼠标离开 → 延迟清除
  37. l = (e) => {
  38. if (e.target.closest('.cursor-pointer')) {
  39. clearTimeout(t)
  40. t = setTimeout(() => {
  41. c()
  42. }, 100)
  43. }
  44. }
  45. document.addEventListener('mousemove', r, true)
  46. document.addEventListener('mouseenter', enter, true) // 新增
  47. document.addEventListener('mouseout', l, true)
  48. }
  49. const d = () => {
  50. clearTimeout(t)
  51. c()
  52. if (r) document.removeEventListener('mousemove', r, true)
  53. if (l) document.removeEventListener('mouseout', l, true)
  54. r = null
  55. l = null
  56. }
  57. i()
  58. return d
  59. }