我有一个MDC菜单组件，我想在其中设置单击或选择列表项的事件侦听器。我已经尝试过各种事件，例如“单击”，“选择”，“ selectionchange”，“ selectstart”，但它们均无效。在documentation中，它表示MDCMenu:selected
用于指示何时选择了元素。此事件还包括选定的项目和该项目的列表索引。
我也尝试收听该事件，但是没有任何效果：
menu.listen("MDCMenu:selected",e => console.log(e));
您可以看到沙箱here。 应该如何为MDC菜单组件设置事件侦听器？
更新
自从我在评论中被告知对其他用户而言，该代码实际上正在工作。我自己用其他浏览器进行了测试，并且在Safari和Firefox中在Mac机器上运行正常，但在Chrome中仍然有问题。我有Chrome版本83.0.4103.61。我已经用注释中的建议更新了codeandbox，但是现在我可以看到，如果按几次选择键，它将突然在所有浏览器中开始随机工作。
似乎不一致是由于竞争状况造成的。单击菜单会使焦点离开输入，从而使菜单关闭。菜单关闭会导致焦点移回输入，使其再次打开。
问题在于菜单通常在菜单有机会发送所选事件之前关闭。
您需要阻止菜单在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