Elm 如何制作自定义事件解码器以在鼠标滚轮移动时获取鼠标 x/y 位置答案

【问题标题】：Elm How to make custom event decoder to get mouse x/y position at mouse-wheel-moveElm 如何制作自定义事件解码器以在鼠标滚轮移动时获取鼠标 x/y 位置
【发布时间】：2019-04-06 23:14:35
【问题描述】：

我试图在 Elm 0.19 编程语言的鼠标滚轮移动事件期间获取鼠标的 x 和 y 坐标。我用这个包尝试它。请参阅“高级用法”下： https://package.elm-lang.org/packages/mpizenberg/elm-pointer-events/3.1.0/Html-Events-Extra-Wheel

包本身没有描述一个清晰的例子，所以我在一个类似的包中寻找一个例子。请参阅本页“高级用法”下的示例： https://package.elm-lang.org/packages/mpizenberg/elm-pointer-events/3.1.0/Html-Events-Extra-Mouse

这个例子和我需要的非常相似，但我也不能让它工作。得到完全相同的问题。

这是我的代码改编自示例以适应鼠标滚轮：

module WheelDecoder exposing(..)

import Html exposing (div, text)
import Html.Events.Extra.Wheel as Wheel
import Json.Decode as Decode


type alias WheelEventWithOffsetXY =
  { wheelEvent : Wheel.Event
  , offsetXY : {x: Float, y: Float}
  }

decodeWeelWithOffsetXY : Decode.Decoder WheelEventWithOffsetXY
decodeWeelWithOffsetXY =
  Decode.map2 WheelEventWithOffsetXY
    Wheel.eventDecoder
    offsetXYDecoder

offsetXYDecoder : Decode.Decoder {x: Float, y: Float}
offsetXYDecoder =
  Decode.map2 (\a b -> {x=a,y=b})
    (Decode.field "offsetY" Decode.float)
    (Decode.field "offsetY" Decode.float)

type Msg
  = WheelOffsetXY {x: Float, y: Float}

view = 
  div
    [ (onWheelOffsetXY (\wheelEvent -> WheelOffsetXY (wheelEvent.offsetXY))) ]
    [ (text "mousewheel here") ]


onWheelOffsetXY : (WheelEventWithOffsetXY -> msg) -> Html.Attribute msg
onWheelOffsetXY tag =
  let
    options = { stopPropagation = True, preventDefault = True }
    func = Decode.map tag decodeWeelWithOffsetXY
    attribute = Wheel.onWithOptions options func
  in
    attribute

当我尝试使用“elm make”编译时，出现以下错误：

-- TYPE MISMATCH -------------------------------------- src/Map/WheelDecoder.elm

The 2nd argument to `onWithOptions` is not what I expect:

39|     attribute = Wheel.onWithOptions options func
                                                ^^^^
This `func` value is a:

    Decode.Decoder msg

But `onWithOptions` needs the 2nd argument to be:

    Wheel.Event -> msg

Hint: I always figure out the argument types from left to right. If an argument
is acceptable, I assume it is “correct” and move on. So the problem may actually
be in one of the previous arguments!

此错误消息是有道理的，因为我可以看到类型不匹配，但我不知道如何解决它。

【问题讨论】：

标签： dom typeerror elm

【解决方案1】：

似乎Wheel.eventDecoder 是为了与Html.Events.on 或Html.Events.onWithOptions 而不是Wheel.onWithOptions 一起工作。这些在 0.19 中被删除，取而代之的是 Html.Events.custom，然而，这略有不同。用这个替换 onWheelOffsetXY 似乎可行：

onWheelOffsetXY : (WheelEventWithOffsetXY -> msg) -> Html.Attribute msg
onWheelOffsetXY tag =
  let
    options message =
        { message = message
        , stopPropagation = True
        , preventDefault = True
        }
    decoder =
        decodeWeelWithOffsetXY
        |> Decode.map tag 
        |> Decode.map options
  in
  Html.Events.custom "wheel" decoder

PS：decodeWeelWithOffsetXY 中有一个错字，顺便说一句。我把错字留在原地。

PPS：另外，您正在查看过时的文档。 Here's the documentation for the latest version.

【讨论】：