dom - Elm 如何制作自定义事件解码器以在鼠标滚轮移动时获取鼠标 x/y 位置
问题描述
我试图在 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!
此错误消息很有意义,因为我可以看到类型不匹配,但我不知道如何解决它。
解决方案
似乎Wheel.eventDecoder
是要使用Html.Events.on
orHtml.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:另外,您正在查看过时的文档。这是最新版本的文档。