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

所以，在＆＃34; mouseenter＆＃34; event，调用decodeRectangle，返回带有div维度的Decoder结构。＆＃39; On＆＃34; mouseenter＆＃34;＆＃39;，返回一个Rectangle结构。然后映射，返回GetPositionDragHere消息。

我想做的是：

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
            ]
            []

即，在＃34; mouseenter＆＃34; event，使用div的Rectangle维度（由decodeRectangle返回）和＆＃34; mouseleave＆＃34;来触发GetPositiondragHere Msg。事件做别的事。

这是错误：

第1和第2个元素是不同类型的值。
225|             [ on "mouseenter" decodeRectangle
226|>            , onMouseLeave RestoreList
227|             , attribute "class" "drag-here"
228|             , sharedStyles
229|             ]
第一个元素有这种类型：
Attribute { height : Float, left : Float, top : Float, width : Float }
但第二是：
Attribute Msg
提示：所有元素都应该是相同类型的值，以便我们可以   迭代列表而不会遇到意外的值。

感谢您的帮助！

Answer 1

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

on "mouseenter" decodeRectangle

到

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

需要定义tagger并具有此类型签名

tagger: Rectangle -> Msg

自定义事件和onMouseEnter在一个div中

1 个答案: