自定义事件和 onMouseEnter 合二为一 div

Question

我正在尝试将两个事件附加到一个 div，但遇到了一些困难。当其中一个事件被附加时代码编译，而不是两个。我将解释现在的工作原理，以及当我尝试附加另一个事件时它是如何中断的。它崩溃的原因很直观，但我不知道如何解决这个问题。

现在我有：

dragHereOverlay : { item : String, color : String } -> Html Msg
dragHereOverlay item =
    App.map (\d -> GetPositionDragHere d item) <|
        div
            [ on "mouseenter" decodeRectangle
            , attribute "class" "drag-here"
            , sharedStyles
            ]
            []

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

因此，在 "mouseenter" 事件中，会调用 decodeRectangle，其中 returns 具有 div 维度的解码器结构。 'On "mouseenter"', returns 一个矩形结构。然后将其映射，返回 GetPositionDragHere Msg。

我想做的是：

dragHereOverlay : { item : String, color : String } -> Html Msg
dragHereOverlay item =
    App.map (\d -> GetPositionDragHere d item) <|
        div
            [ on "mouseenter" decodeRectangle
            , onMouseLeave DoSomethingElse
            , attribute "class" "drag-here"
            , sharedStyles
            ]
            []

即，在 "mouseenter" 事件中，使用 div 的矩形尺寸（由 decodeRectangle 返回）触发 GetPositiondragHere Msg，并在 "mouseleave" 事件中执行其他操作。

这是错误：

The 1st and 2nd elements are different types of values.
225|             [ on "mouseenter" decodeRectangle
226|>            , onMouseLeave RestoreList
227|             , attribute "class" "drag-here"
228|             , sharedStyles
229|             ]
The 1st element has this type:
Attribute { height : Float, left : Float, top : Float, width : Float }
But the 2nd is:
Attribute Msg
Hint: All elements should be the same type of value so that we can iterate through the list without running into unexpected values.

Thanks for your help!

Answer 1

好的，所以错误消息告诉你问题所在。你需要改变

on "mouseenter" decodeRectangle

到

on "mouseenter" (Json.Decode.map tagger decodeRectangle)

需要定义标记器并具有此类型签名的地方

tagger: Rectangle -> Msg

自定义事件和 onMouseEnter 合二为一 div

Custom event and onMouseEnter in one div

elm