如何在 Elm 0.19 中监听全局鼠标事件？

Question

要在 Elm 中侦听 HTML 元素上的鼠标事件，我们可以使用Html.Events.onClick。但是，我想在文档的任何地方监听鼠标点击。

我找到了elm-lang/mouse提供Mouse.clicks的包，它似乎就是为此而设计的。在 Elm 0.18 上，可以这样安装：

elm-package install elm-lang/mouse

并像这样导入：

import Mouse exposing (clicks)

但是在 Elm 0.19 上，命令

import Mouse exposing (clicks)

不起作用：

以下软件包目前不适用于 Elm 0.19.0：

elm-lang/mouse

控制台输出中没有给出原因。该文档似乎没有表明该模块在 0.19 版本中发生了任何变化。

如何安装模块？或者，我如何使用 Elm 的标准库来全局（在文档上）监听鼠标点击？

Answer 1

该包已合并到 elm/browser。因此Mouse.clicks，您现在使用Browser.Events.onClick. 请参阅此处浏览器软件包的文档。

要检索鼠标位置，请使用Json.Decode：

import Browser.Events exposing (onClick)
import Json.Decode as Decode

type alias Msg =
    { x : Int, y : Int }

subscriptions : Model -> Sub Msg
subscriptions model =
    onClick
        (Decode.map2 Msg
            (Decode.field "pageX" Decode.int)
            (Decode.field "pageY" Decode.int)
        )

有关其他属性，请参阅有关MouseEvent的文档。

单击和移动的快速在线演示。