Question

注意：我只在Chromium中看到此行为。在Firefox中，当鼠标悬停在Elm应用程序上时，我会得到鼠标移动信号。

当我“嵌入”我的Elm程序而不是“全屏”时，它不会给我Mouse.position信号，除非我点击并拖动嵌入它的div中的鼠标。即使我将鼠标移动到包含Elm应用程序的div上，除非我点击并拖动，否则我不会获得信号。

我的榆树代码直接从http://elm-lang.org/examples/mouse-position复制：

import Graphics.Element exposing (..)
import Mouse

main : Signal Element
main =
  Signal.map show Mouse.position

我的HTML是：

<div id="mousepos" style="display: inline-block;"></div>
<script src="mousepos.js"></script>
<script type="text/javascript">
var mousepos = document.getElementById( "mousepos" );
Elm.embed( Elm.Main, mousepos );
</script>

如果我点击并拖动div，我会看到数字会发生变化，但是如果我只是移动鼠标，它们就不会改变（即使我单击了一次以给出画布焦点）。

我做错了吗？

编辑：强调即使我将鼠标移到包含Elm应用程序的div上，我也看不到鼠标移动。

编辑2：添加说明我只在Chromium中看到此内容。

Answer 1

Mouse.position只会监听组成Elm应用程序的顶级DOM元素上的鼠标移动。

您可以通过查看Mouse.position is tied to the listening event的源代码来查看此内容。它只将侦听器添加到Elm app DOM节点，而不是整个页面。由于您正在执行Elm.embed()，因此您的节点只是mousepos div，而不是整个页面。

如果您想要响应整个页面上的鼠标位置，您需要创建一个端口，用于从Javascript发送全局鼠标位置信号。

在Chromium中的嵌入式Elm程序中获取鼠标移动事件

1 个答案: