我正在使用Material Design Web Components component called "Menu."
启动菜单后,我需要能够轻松地处理“选择”“菜单项”的所有方式。通过我的框架的模板语言(vue)添加点击操作是可行的,但是,添加点击输入和其他键的方法不起作用。示例:
<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
键具有用于关闭菜单的事件处理程序,该事件处理程序正在捕获我的按键操作。我不太确定。
无论如何,处理选择的“正确”方法似乎是通过 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
事件?
最佳答案
该函数显然被称为listen
,并接受完整的字符串事件名称作为第一个参数,并将要调用的函数作为第二个参数。
this.menu.listen('MDCMenu:selected',()=>{
console.log('hi');
});
这在我能找到的任何地方都没有记录,我猜的。如果有人能找到文档,我会接受该答案。
关于javascript - 对于Material Design Web Components的菜单组件,如何在JavaScript中捕获 "MDCMenu:selected"事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57581878/