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

Question

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

这个包本身没有描述清楚的例子所以我在类似的包中找了一个例子。请参阅本页 "advanced usage" 下的示例： 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!

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

Answer 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.

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

Elm How to make custom event decoder to get mouse x/y position at mouse-wheel-move

dom

typeerror

elm