0
聚合物1.0發佈後，我試圖更新我正在處理的應用程序。儘管提供了相當完整的文檔：https://www.polymer-project.org/1.0/docs/migration.html，但我仍遇到一些問題，特別是以下問題。重點與輕拍事件的紙張菜單衝突
我在紙張菜單按鈕旁邊使用了紙張菜單元素。 我們的目標是在每個紙張項目上都有一個標準菜單，該紙張菜單按鈕允許我自定義相應的部分。 由於代碼始終是清晰的在這裏的什麼，我想實現（我簡化它BU利用聚合物網站的基本演示）
<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。