1つのdiv内のカスタムイベントとonMouseEnter

Question

1つのdivに2つのイベントをアタッチしようとしていますが、難しかったです。これらのイベントの1つがアタッチされると、コードはコンパイルされますが、2つではありません。私は今働いているものを説明し、別のイベントを添付しようとするとそれがどのように壊れるかを説明します。それが壊れている理由は非常に直感的ですが、私は問題を解決する方法を知りません。

今私が持っている：だから

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はdiv要素の寸法とデコーダ構造を返す、と呼ばれています。 'On' mouseenter "'は、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 
      ] 
      [] 

すなわち、「MouseEnterイベント」イベントで、（decodeRectangleで返される）のdivの長方形の寸法でGetPositiondragHereメッセージを発射し、上"mouseleave"イベントは何か他のことをします。

これは誤りである：

第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

[OK]をクリックすると、問題が示されます。あなたは

に

tagger: Rectangle -> Msg