对于Material Design Web Components 的菜单组件，如何捕获JavaScript 中的"MDCMenu:selected" 事件？

Question

我正在使用 Material Design Web Components component called "Menu."

启动菜单后，我需要能够无障碍地处理 "menu item" 的所有方式 "selected." 但是，通过我的框架的模板语言 (vue) 添加点击是可行的，为 on-enter 和其他键添加方法不起作用。示例：

  <li
    v-for="option in options"
    :key="option"
    class="mdc-list-item"
    @click="onChange(option)" // this works
    @keyup.enter="onChange(option)" //this doesn't work
    role="menuitem">

我预计这是因为 enter 键具有用于关闭菜单的事件处理程序，它们正在捕获我的按键操作。我不完全确定。

无论如何，似乎 "proper" 处理选择的方法是通过 MDCMenu:selected 事件。文档中的描述：

[MDCMenu:selected is] Used to indicate when an element has been selected. This event also includes the item selected and the list index of that item.

但是，没有关于如何捕获此事件的说明。我试过：

this.menu = new MDCMenu(this.$refs.menu);
this.menu.root.addEventListener(
  'MDCSimpleMenu:selected', ()=>{console.log('HELLOOOOOO')});

这导致了很多 undefined 错误，这很奇怪，因为我可以访问 this.menu.root 并且它似乎是一个 DOM 元素。

我也试过：

this.menu = new MDCMenu(this.$refs.menu);
this.menu.addEventListener(
  'MDCSimpleMenu:selected', ()=>{console.log('HELLOOOOOO')});

这引发了关于 addEventListener 不是 this.menu 上存在的函数的错误；

我搜索了源代码，但没有发现任何关于事件处理或发出的明显信息。

如何捕获 MDCMenu:selected 事件？

Answer 1

该函数显然被称为 listen，并将完整的字符串事件名称作为第一个参数，将要调用的函数作为第二个参数。

 this.menu.listen('MDCMenu:selected',()=>{
   console.log('hi');
 });

这在我能找到的任何地方都没有记录，我猜是的。如果有人能找到文档，我会接受那个答案。

对于Material Design Web Components 的菜单组件，如何捕获JavaScript 中的"MDCMenu:selected" 事件？

For the Menu Component of Material Design Web Components, how do I capture the "MDCMenu:selected" event in JavaScript?

html

javascript

events

vue.js

mdc-components