MDC 菜单 - 选择随机工作的事件侦听器答案

【问题标题】：MDC Menu - select event listener working randomlyMDC 菜单 - 选择随机工作的事件侦听器
【发布时间】：2020-05-20 19:56:07
【问题描述】：

我有一个 MDC 菜单组件，我想在其中为列表项设置单击或选择事件侦听器。我尝试过各种事件，例如“click”、“select”、“selectionchange”、“selectstart”，但都没有奏效。在documentation 它说MDCMenu:selected

用于指示何时选择了一个元素。此事件还包括所选项目和该项目的列表索引。

我也尝试过收听该事件，但没有任何效果：

menu.listen("MDCMenu:selected", e => console.log(e));

您可以看到沙盒here。 MDC菜单组件的事件监听应该如何设置？

更新

自从我在 cmets 中获悉，对于其他用户，该代码实际上是有效的。我自己用其他浏览器进行了测试，在 safari 和 firefox 中它在我的 mac 机器上运行良好，但在 Chrome 中我仍然有问题。我有 chrome 版本 83.0.4103.61。我已经根据 cmets 的建议更新了代码框，但我现在可以看到，如果按几次选择选项，它会突然在所有浏览器中开始非常随机地工作。

【问题讨论】：

有什么问题？我一点击输入框，菜单就下拉，当我点击一个菜单项时，我看到console.log()的结果是你的听众造成的。
@kmoser 我不知道为什么，但是当我在发布链接的代码和框中运行控制台时，我很少随机地在控制台中得到一些东西
不知道该告诉你什么，因为它在 Firefox 和 Chrome (Windows) 中对我来说是一致的。你用的是什么浏览器？
我已经测试过了，它在 safari 和 firefox 上都适用，但在 chrome 上不适用
什么版本的 Chrome？

标签： javascript mdc-components

【解决方案1】：

似乎不一致是由于竞争条件造成的。单击菜单会使焦点离开导致菜单关闭的输入。并且菜单关闭会导致焦点移回输入使其再次打开。

问题是菜单经常在菜单有机会发送所选事件之前关闭。

您需要阻止菜单在focusout 上关闭，或者在关闭菜单之前设置一个较长的超时时间。

input.listen("focusout", () => {
  setTimeout(() => {
    menu.open = false;
    // The timer might need to be fiddled with. Needs to not be too big or too small.
  }, 120);
});

https://codesandbox.io/s/new-brook-o7k1j?file=/src/index.js

这是另一个没有 setTimeout 时间问题的选项。它使用 0 超时来模拟 setInterval，以便重新排序事件的时间，而不是将它们推到事件队列的末尾。这应该更安全，更不容易出现以前的竞争条件问题。

let menuFocused = false;
input.listen("focusin", () => {
  if (!menuFocused) menu.open = true;
});
input.listen("click", () => {
  menu.open = true;
});

menu.listen("focusin", () => {
  menuFocused = true;
});
menu.listen("focusout", () => {
  // This interval is to help make sure that input.focusIn doesn't re-open the menu
  setTimeout(() => {
    menuFocused = false;
  }, 0);
});
input.listen("focusout", () => {
  setTimeout(() => {
    if (!menuFocused) menu.open = false;
  }, 0);
});

https://codesandbox.io/s/proud-hooks-c9qi5?file=/src/index.js

【讨论】：