elm - 如何在 Elm 中识别一个事件

Question

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

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

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

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

单击时，它会在打开 或关闭 之间切换。

这很好，但有一些问题

场景

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

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

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

Answer 1

我建议删除 Toggle 操作。它没有必要，只会引起困惑，因为它忽略了当前状态。

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

type alias Model =
  { open : Bool }

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

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

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