在 Elm 中,如何检测鼠标相对于 html 元素的位置?
In Elm, how can I detect the mouse position relatively to an html element?
我想知道鼠标相对于 html 元素的位置。我也会知道元素的大小。
可以通过 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
我想知道鼠标相对于 html 元素的位置。我也会知道元素的大小。
可以通过 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