PureScript Halogen：如何获取鼠标悬停触发元素的页面自身坐标？

嘿，这个问题其实核心是结合DOM原生API和PureScript的DOM封装库来解决，我来一步步给你拆解清楚：

先搞懂坐标的核心概念 #

首先得明确几个坐标的区别，这是解决问题的基础：

• pageX/pageY：鼠标指针相对于整个文档顶部左上角的坐标（包含页面滚动过的距离）
• clientX/clientY：鼠标指针相对于浏览器视口左上角的坐标（不包含页面滚动距离）
• 元素自身的页面坐标：指元素左上角相对于整个文档顶部左上角的位置，这个需要通过元素的边界矩形来计算。

在PureScript中的实现步骤 #

你需要用到PureScript的DOM相关库，比如purescript-web-dom（这是比较常用的现代封装库）。核心思路是：拿到触发悬停事件的元素 → 获取它的边界矩形 → 结合页面滚动距离计算出元素在页面上的绝对坐标。

完整代码示例 #

import Web.DOM (Element, EventTarget, castToElement)
import Web.DOM.Element (getBoundingClientRect)
import Web.Event.Mouse (MouseEvent, target, pageX, pageY)
import Web.Window (window, scrollX, scrollY)
import Effect (Effect)
import Effect.Class (liftEffect)
import Effect.Console (log)

handleHover :: MouseEvent -> Effect Unit
handleHover event = do
  -- 1. 获取触发悬停事件的目标元素
  let eventTarget = target event
  case castToElement eventTarget of
    Just element -> do
      -- 2. 获取元素相对于视口的边界矩形
      rect <- getBoundingClientRect element
      -- 3. 获取当前页面的滚动距离
      scrollXVal <- scrollX =<< window
      scrollYVal <- scrollY =<< window
      -- 4. 计算元素相对于整个文档的绝对坐标
      let elementPageX = rect.left + scrollXVal
          elementPageY = rect.top + scrollYVal
      -- 这里可以根据需求使用这些坐标，比如打印输出
      log $ "元素页面X坐标: " <> show elementPageX
      log $ "元素页面Y坐标: " <> show elementPageY

      -- 额外：如果需要鼠标在元素内部的相对坐标
      mousePageX <- pageX event
      mousePageY <- pageY event
      let mouseInElementX = mousePageX - elementPageX
          mouseInElementY = mousePageY - elementPageY
      log $ "鼠标在元素内的X坐标: " <> show mouseInElementX
      log $ "鼠标在元素内的Y坐标: " <> show mouseInElementY
    Nothing -> log "触发事件的目标不是Element类型"

关键代码解释 #

• castToElement eventTarget：因为事件的target可能是任何EventTarget（比如文本节点），所以需要先转换成Element类型才能调用元素相关的API。
• getBoundingClientRect element：这个方法返回元素的DOMRect对象，包含left、top等属性，代表元素相对于视口的位置。
• scrollX/scrollY：获取页面当前的水平和垂直滚动距离，把它和rect.top/rect.left相加，就能得到元素相对于整个文档的绝对坐标——也就是你要的“元素自身在页面上的坐标”。

总结 #

当然可以获知鼠标下方元素自身的坐标！核心就是利用getBoundingClientRect获取元素的视口位置，再结合页面滚动距离转换成页面绝对坐标。如果需要鼠标在元素内部的相对位置，用鼠标的pageX/pageY减去元素的页面坐标即可。

内容的提问来源于stack exchange，提问作者Oleg Shevchenko