页面上元素的 PureScript 卤素坐标答案

【问题标题】：PureScript Halogen coordinates of the element on the page页面上元素的 PureScript 卤素坐标
【发布时间】：2018-09-11 23:35:05
【问题描述】：

当我将鼠标悬停在触发此事件的页面上时，如何获取元素本身的坐标？在 purescript 中，有机会获取页面、屏幕和客户端坐标。是否可以知道鼠标下元素本身的坐标？

【问题讨论】：

标签： purescript halogen

【解决方案1】：

我找到了一种方法，例如像这样。

import DOM.Event.Event as DEE
import DOM.Event.MouseEvent as ME
import DOM.HTML.HTMLElement
import Halogen.HTML.Events as HE
import Halogen as H
import Halogen.HTML as HH
...

data Query a = Toggle HTMLElement a | ...

render :: State -> H.ComponentHTML Query
render state =
HH.html
[
  HE.onMouseEnter (\e -> HE.input_ (Toggle $ U.unsafeCoerce $ DEE.target $ ME.mouseEventToEvent e) e)
]
[HH.text state]

update :: forall eff. Query ~> H.ComponentDSL State Query Unit (Aff (dom :: DOM | eff))
update query = case query of
  RememberElementPos element next -> do
    posisition <- H.liftEff (getBoundingClientRect element) // this is the position of the element itself
    H.modify (\state -> updateState state position)
    pure next

updateState :: State -> DOMRect -> State
...

【讨论】：