javascript - Web Material Design : MDCTopAppBar, 处理 Action 点击

Question

我有一个定义，比如:

<header class="mdc-top-app-bar mdc-top-app-bar--short">
  <div class="mdc-top-app-bar__row">
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
      <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
      <span class="mdc-top-app-bar__title">Title</span>
    </section>
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
      <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
    </section>
  </div>
</header>

然后我在 javascript 中创建一个 MDCTopAppBar，如下所示:

var myTAB = mdc.topAppBar.MDCTopAppBar(myHTML);

...然后像这样连接菜单点击:

myTAB.listen("MDCTopAppBar:nav", function () { alert("Wevs"); });

我的问题是，如何监听对操作的点击？我在文档中找不到任何内容，并且对代码库不够熟悉，无法轻松地从源代码中找到。

Answer 1

好的，调查一下， Material 框架似乎没有附加到操作图标的事件处理，但有菜单图标。诡异的。

您可以将标准的 javascript 事件处理程序附加到作为操作的元素。

例如:

var myActionA = document.getElementById("myAction");
myActionA.addEventListener("click", function () { alert("Action clicked!"); }, false);