具有两个解码值的自定义事件

Question

我正在尝试编写一个自定义事件，将两个解码值发送到 update。 on "mousedown"，我想通知 update 关于鼠标的位置以及 DOM 元素的尺寸。

以下是我尝试过但不起作用的方法：

dragMeListItem : Item -> Html Msg
dragMeListItem item =
    div
        [ on "mousedown" (Decode.map (\posit -> (Decode.map (\rect -> DragStart posit rect item) decodeRectangle)) Mouse.position)
        , attribute "class" "drag-me"
        , sharedStyles
        , style
            [ ( "background-color", item.color )
            , ( "border", "1px solid #DD0848" )
            ]
        ]
        [ text "Drag Me!"
        , br [] []
        , text (toString item.value)
        ]

-

decodeRectangle : Decode.Decoder Rectangle
decodeRectangle =
    let
        rectangle =
            DOM.target
                :> DOM.boundingClientRect
    in
        rectangle

-

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        DragStart xy rectangle item ->
            let
                xY =
                    Debug.log "xy:" xy

                consoleRectangle =
                    Debug.log "rectangle:" rectangle

                consoleItem =
                    Debug.log "item:" item
            in
                { model
                    | draggingItem = Just ( item, rectangle )
                    , drag = Just (Drag xy xy)
                }
                    ! []

- 编译器错误是：

The type annotation for dragMeListItem does not match its definition.

362| dragMeListItem : Item -> Html Msg

The type annotation is saying:
Item -> Html Msg
But I am inferring that the definition has this type:
Item -> Html (Decode.Decoder Msg)

Answer 1

问题源于您在 "mousedown" 行中嵌套使用了 Decode.map。尝试使用 andThen 代替：

(Mouse.position `Decode.andThen` \posit ->
    decodeRectangle `Decode.andThen` \rect ->
        Decode.succeed (DragStart posit rect item))

具有两个解码值的自定义事件

Custom event with two decoded values

elm