Javascript 纸张菜单焦点与点击事件冲突_Javascript_Html_Focus_Dom Events_Polymer 1.0

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

javascript html

Javascript 纸张菜单焦点与点击事件冲突,javascript,html,focus,dom-events,polymer-1.0,Javascript,Html,Focus,Dom Events,Polymer 1.0,在Polymer 1.0发布之后，我尝试更新我正在开发的一个应用程序。尽管提供了相当完整的文档：，但我仍然遇到一些问题，特别是以下问题我正在使用纸质菜单元素以及纸质菜单按钮。目标是在每个纸张项目上都有一个标准菜单，一个纸张菜单按钮，允许我自定义相应的部分。因为这里的代码总是比较清晰，所以我尝试实现的一个示例通过使用polymer站点的基本演示来简化它 <html> <head> <meta charset="utf-8">

在Polymer 1.0发布之后，我尝试更新我正在开发的一个应用程序。尽管提供了相当完整的文档：，但我仍然遇到一些问题，特别是以下问题

我正在使用纸质菜单元素以及纸质菜单按钮。目标是在每个纸张项目上都有一个标准菜单，一个纸张菜单按钮，允许我自定义相应的部分。因为这里的代码总是比较清晰，所以我尝试实现的一个示例通过使用polymer站点的基本演示来简化它

<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事件处理

如果有人能告诉我问题出在哪里，我会很棒的！希望已经足够清楚。

最终找到了答案：在焦点上，一个伪元素after显示在项目顶部。一旦在混音后通过纸质菜单项禁用，我就可以正常使用纸质菜单按钮进行交互