在Elm中，我如何檢測相對於html元素的鼠標位置？

Question

我想知道鼠標相對於html元素的位置。我也知道元素的大小。

Answer 1

可以使用mouseMove事件檢測鼠標位置。這是使用The Elm Architecture如何實現它的一個例子。

的視圖：

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