如何在 Elm 中识别一个事件

Question

我有一个 div 具有以下模仿菜单的操作

div
  [ onClick address Toggle
  , onFocus address Open
  , onBlur address Close
  ]
  [ ... some items with click handlers ]

当一个选项卡到 div 时，它有焦点并执行显示菜单的 Open。

当它失去焦点时，onBlur 被引发并执行 Close 隐藏菜单

单击时，它会在 Open 或 Close 之间切换。

这工作正常，但有一些问题

场景

当用户单击 div 时，它会触发 onFocus 打开菜单。
然后触发 onClick，执行切换并关闭菜单。

如何在 onFocus 之后识别 onClick 以便不切换菜单？如果没有，在 Elm 中处理这种情况的最佳方法是什么。

如果用户切换到 div 然后点击它，这会很好地工作。由于它已经有焦点，它会按预期切换和运行。

Answer 1

我建议删除 Toggle 操作。这不是必需的，只会引起混乱，因为它无视当前状态。

相反，您的模型中可能已经有一些东西可以跟踪 div 当前是否打开，因为我想您会根据这一事实设置不同的样式。对于这个例子，我假设你的模型看起来像这样：

type alias Model =
  { open : Bool }

然后您可以删除 Toggle 操作并更改 onClick 处理程序以根据当前状态发送 Open 或 Close 操作。

div
  [ onClick address (if model.open then Close else Open)
  , onFocus address Open
  , onBlur address Close
  ]
  [ ... some items with click handlers ]

这使您有可能连续触发两个 Open 动作，但是应该没问题，因为第二个 Open 会本质上是一个空操作，根本不会改变已经打开的模型。

如何在 Elm 中识别一个事件

How to identify an event after the other in Elm

elm