聚合物 - 如何在选择纸张菜单项后触发事件-Java 学习之路

我有纸质菜单 . 每个项目都包含一个纸质按钮 . 仅当按钮不在选定的纸张项目内时，纸张按钮单击/点击事件才会触发 .

<body>
  <template is="dom-bind" id="root">
    <paper-menu>
      <paper-item>
        Item 1 
        <paper-button id="button_1" on-tap="tapAction" raised>Button 1</paper-button>
      </paper-item>
      <paper-item>
        Item 2
        <paper-button id="button_2" on-tap="tapAction" raised>Button 2</paper-button>
      </paper-item>
      <paper-item>
        Item 3
        <paper-button id="button_3" on-tap="tapAction" raised>Button 2</paper-button>
      </paper-item>
    </paper-menu>
  </template>

  <script>
    var root = document.querySelector("#root");

    root.tapAction = function(e) {
      console.log("tapAction: ", e.target.id)
    };

  </script>
</body>

另见：http://plnkr.co/edit/vZk8gwLOxh6hxyiGPiu5

如何在选择菜单项后触发Polymer组件（如纸张按钮）上的单击/点击事件？

1 回答

1
该
```
<paper-item>
```
似乎阻止了你的激活
```
<paper-button>
```
元素 . 你可以通过两种方式克服这一点 . 首先你可以使用铁激活事件
```
<paper-menu>
```
像这样
```
<paper-menu on-iron-activate="tapAction">
    ...
</paper-menu>
```
或者你可以删除
```
<paper-item>
```
来自周围的包装纸
```
<paper-button>
```
这将允许他们被激活 .
```
<paper-menu>
  <div>
    Item 1 <paper-button id="button_1" on-tap="tapAction" raised>Button 1</paper-button>
  </div>
  <div>
    Item 2
    <paper-button id="button_2" on-tap="tapAction" raised>Button 2</paper-button>
  </div>
  <div>
    Item 3
    <paper-button id="button_3" on-tap="tapAction" raised>Button 2</paper-button>
  </div>
</paper-menu>
```
而且我认为你不必担心这样做
```
var root = document.querySelector("#root");
```
如
```
<template is="dom-bind" id="root">
    ...
</template>
```
已经为你做了，所以你应该能够逃脱这样做
```
<script>
    root.tapAction = function(e) {
      console.log("tapAction: ", e.target.id)
    };
</script>
```
更新：

去除的解决方案
```
<paper-item>
```
并替换它
```
<div>
```
有它的问题，因为一旦它被选中，选定的项目按钮将不再能够被激活 . 不要问我为什么，因为我自己才发现这一点 . 即使选择了项目，但是event.target将是
```
<paper-menu>
```
虽然您可以使用所选属性来确定选择了哪个项目，但它总是比实际选定项目落后一步 . 因此，如果您选择了第1项，则所选的项目最初将是未定义的，除非您预先选择了项目
```
<paper-menu selected="0">
```
但即便如此，如果您选择另一个项目，则已触发事件中的所选项目仍将是前一个项目 . 你必须进行实验，但我可能会建议你尝试别的东西，如
```
<paper-menu>
```
如果您想要使用，可能不符合您想要使用它的目的
```
<paper-button>
```
元素 .
回复于 2024-05-02T06:12:47+08:00

聚合物 - 如何在选择纸张菜单项后触发事件

1 回答

相关问题