Question

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

Answer 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
...

PureScript Halogen坐标页面上的元素

1 个答案: