Question

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

<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

如何在选择菜单项后触发像纸张按钮这样的聚合物组件上的点击/点击事件？

Answer 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将是

，iron-activate的解决方案仍然会触发

<paper-menu>

虽然您可以使用所选属性来确定选择了哪个项目，但它总是比实际所选项目落后一步。因此，如果您选择了第1项，则所选的项目最初将是未定义的，除非您预先选择了项目

<paper-menu selected="0">

但即便如此，如果您选择其他项目，则已触发事件中的所选项目仍将是前一项目。您必须进行实验，但我可能会建议您尝试其他方式，例如

<paper-menu>

可能不符合您想要使用它的目的，如果您想要使用

<paper-button>

元素。

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

1 个答案: