Question

在发布Polymer 1.0之后，我尝试更新我正在处理的应用程序。尽管提供了相当完整的文档：https://www.polymer-project.org/1.0/docs/migration.html，我仍然遇到一些问题，特别是下面的问题。

我正在使用纸质菜单元素和纸质菜单按钮一起。目标是在每个纸张项目上都有一个标准菜单，一个纸张菜单按钮，允许我自定义相应的部分。因为代码在这里总是比较清楚我想要实现的一个例子（我使用聚合物网站的基本演示简化了它）

<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

    <title>paper-menu demo</title>

    <script src="./bower_components/webcomponentsjs/webcomponents-lite.js"></script>

    <link rel="import" href="./bower_components/paper-item/paper-item.html">
    <link rel="import" href="./bower_components/paper-menu/paper-menu.html">
    <link rel="import" href="./bower_components/paper-menu-button/paper-menu-button.html">
    <link rel="import" href="./bower_components/paper-menu/paper-submenu.html">
    <link rel="import" href="./bower_components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="./bower_components/paper-styles/demo-pages.html">

    <style is="custom-style">
        paper-item {
            --paper-item: {
                cursor: pointer;
            }
            ;
        }

        paper-icon-button{
            height: 20px;
            width: 20px;
            background-color: black;
        }

        .sublist {
            padding-left: 20px;
            padding-right: 20px;
        }
    </style>
</head>

<body unresolved>

    <template id="Demo" is="dom-bind">
        <h4>Sub-menu</h4>
        <div class="horizontal-section">
            <paper-menu>
                <paper-submenu>
                    <paper-item class="menu-trigger">
                        Topics
                        <span class="flex layout horizontal end-justified">
                            <paper-menu-button on-tap="test">
                                <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
                                <paper-menu class="dropdown-content">
                                    <template is="dom-repeat" items="[[letters]]" as="letter">
                                        <paper-item>[[letter]]</paper-item>
                                    </template>
                                </paper-menu>
                            </paper-menu-button>
                        </span>
                    </paper-item>
                    <paper-menu class="menu-content sublist">
                        <paper-item>Topic 1</paper-item>
                        <paper-item>Topic 2</paper-item>
                        <paper-item>Topic 3</paper-item>
                    </paper-menu>
                </paper-submenu><paper-item class="menu-trigger">
                    Faves
                        <span class="flex layout horizontal end-justified">
                            <paper-menu-button on-tap="test">
                                <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
                                <paper-menu class="dropdown-content">
                                    <template is="dom-repeat" items="[[letters]]" as="letter">
                                        <paper-item>[[letter]]</paper-item>
                                    </template>
                                </paper-menu>
                            </paper-menu-button>
                        </span>
                </paper-item>
            </paper-menu>
        </div>

    </template>
</body>
<script>
    Demo.letters = [
      'alpha',
      'beta',
      'gamma',
      'delta',
      'epsilon'
    ];
    Demo.test = function(event){
        event.stopPropagation();
    }
</script>

</html>

问题出现了：只要相应的纸张项目聚焦（以灰色显示），纸张菜单按钮就不会再做出反应。我不明白为什么要集中注意力影响内部纸张菜单按钮。

我试图阻止事件冒泡，但它没有改变任何东西。我甚至不确定问题出在哪里，纸质菜单行为？ javascript事件处理？

如果有人知道问题是什么我可能会很棒！希望足够清楚：s。

Answer 1

终于找到了答案：关注焦点后面的伪元素显示在项目的顶部。一旦在mixin之后通过--paper-menu-focused-item-disabled禁用，我可以正常地与我的纸张菜单按钮进行交互

纸张菜单的焦点与点击事件冲突

1 个答案: