在Elm中，如何侦听节点上生成的鼠标滚轮事件

请参见以下示例：

模块主显示（主）
导入Html公开（…）
导入Html.Attributes（样式）
导入Html.Events（选项、onClick、onWithOptions）
导入Json。解码为JD
导入Json.Decode.Extra公开（（|：））
导入结果公开（使用默认值）
将字符串导入为S
main：程序从不使用模型Msg
主要=
Html.program
{init=init
，update=update
，订阅=订阅
，视图=视图
}
初始化：（模型，Cmd Msg）
初始化=
（型号“”，Cmd.none）
类型别名模型=
{消息：字符串
}
输入味精
=缩放鼠标滚轮事件
|点击
类型别名MouseWheelEvent=
{deltaX:浮动
，deltaY:Float
，clientX:Float
，客户：浮动
}
更新：Msg->Model->（Model，Cmd-Msg）
更新msg模型=
味精案例
缩放e->
（{model | message=toString e}，Cmd.none）
点击->
（{model | message=“Clicked！”}，Cmd.none）
DecodeMouseeEvent:JD.Decoder Msg
解码鼠标事件=
地图缩放
（JD.succeemouseweelevent）
|：鼠标属性“deltaX”
|：鼠标属性“deltaX”
|：鼠标属性“deltaX”
|：鼠标属性“deltaX”
)
mouseAttribute:String->JD.Decoder Float
穆塞克=
JD.at[k]JD.string |>JD.然后是readFloat
readFloat:String->JD.Decoder Float
读浮点数=
JD.success（默认值为0（S.toFloat n））
查看：模型->Html消息
视图m=
分区[]
[p[][text事件正在被触发，但您的解码器失败，因为字段
event.deltaX
，
event.deltaY
等不是字符串，而是浮动的。如果解码器失败，AFAIK Elm会自动忽略该事件。如果我将解码器从以下位置更改为：

decodeMouseEvent : JD.Decoder Msg
decodeMouseEvent =
    JD.map Zoom
        (JD.succeed MouseWheelEvent
            |: mouseAttribute "deltaX"
            |: mouseAttribute "deltaX"
            |: mouseAttribute "deltaX"
            |: mouseAttribute "deltaX"
        )


mouseAttribute : String -> JD.Decoder Float
mouseAttribute k =
    JD.at [ k ] JD.string |> JD.andThen readFloat


readFloat : String -> JD.Decoder Float
readFloat n =
    JD.succeed (withDefault 0 (S.toFloat n))

致：

正在触发事件，但解码器失败，因为字段
event.deltaX
，
event.deltaY
等不是字符串，而是浮动的。如果解码器失败，AFAIK Elm会自动忽略该事件。如果我将解码器从以下位置更改，它会工作：

decodeMouseEvent : JD.Decoder Msg
decodeMouseEvent =
    JD.map Zoom
        (JD.succeed MouseWheelEvent
            |: mouseAttribute "deltaX"
            |: mouseAttribute "deltaX"
            |: mouseAttribute "deltaX"
            |: mouseAttribute "deltaX"
        )


mouseAttribute : String -> JD.Decoder Float
mouseAttribute k =
    JD.at [ k ] JD.string |> JD.andThen readFloat


readFloat : String -> JD.Decoder Float
readFloat n =
    JD.succeed (withDefault 0 (S.toFloat n))

致：

decodeMouseEvent : JD.Decoder Msg
decodeMouseEvent =
    JD.map Zoom
        (JD.succeed MouseWheelEvent
            |: JD.field "deltaX" JD.float
            |: JD.field "deltaY" JD.float
            |: JD.field "clientX" JD.float
            |: JD.field "clientY" JD.float
        )