在 Elm 中,如何检测相对于 html 元素的鼠标位置?

Posted

技术标签:

【中文标题】在 Elm 中,如何检测相对于 html 元素的鼠标位置?【英文标题】:In Elm, how can I detect the mouse position relatively to an html element? 【发布时间】:2018-02-28 13:27:47 【问题描述】:

我想知道鼠标相对于 html 元素的位置。我也会知道元素的大小。

【问题讨论】:

【参考方案1】:

可以通过 mouseMove 事件检测鼠标位置。这是一个如何使用 Elm 架构实现它的示例。

观点:

view : Model -> Html Msg
view model =
    div []
        [ img
            [ on "mousemove" (Decode.map MouseMove decoder)
            , src "http://..."
            ]
            []
        ]

解码器:

decoder : Decoder MouseMoveData
decoder =
    map4 MouseMoveData
        (at [ "offsetX" ] int)
        (at [ "offsetY" ] int)
        (at [ "target", "offsetHeight" ] float)
        (at [ "target", "offsetWidth" ] float)

类型别名

type alias MouseMoveData =
     offsetX : Int
    , offsetY : Int
    , offsetHeight : Float
    , offsetWidth : Float
    

还有消息

type Msg
    = MouseMove MouseMoveData

这就是数据到达更新的方式:

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        MouseMove data ->
            -- Here you can use your "data", updating
            -- the model with it, for example
            (  model | zoomMouseMove = Just data , Cmd.none )

这是一个做类似事情的库:http://package.elm-lang.org/packages/mbr/elm-mouse-events/1.0.4/MouseEvents

【讨论】:

以上是关于在 Elm 中,如何检测相对于 html 元素的鼠标位置?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Elm 中创建 HTML 数据属性?

如何在Elm中获取svg文本的长度

CSS如何相对同辈元素定位

如何获取相对于持有 onclick 监听器的 SVG 元素的点击坐标?

如何使固定元素保持相对于当前顶部滚动位置?

在 jQuery 中,如何设置元素的“top,left”属性,其位置值相对于父级而不是文档?