html - Polymer 1.0 a/自定义元素下工具栏点击bug

Question

我在使用我创建的名为 <little-game></little-game> 的自定义元素时遇到了一些问题.
这是 <little-game></little-game>模板代码:

<template>
<a href="{{link}}">
<paper-material elevation="1">
  <paper-ripple></paper-ripple>
  <iron-image src="{{img_url}}"></iron-image>
  <div id="description">{{name}}</div>
  <div id="category">{{category}}</div>
</paper-material>
</a></template>

以及这个元素的 :host css:

:host {
  display: inline-block;
  text-decoration: none;
  z-index:1;
}

那些<little-game></little-game>元素显示在页面中，在此页面内我有一个 <paper-scroll-header-panel>和一个 <paper-toolbar> .问题是当我向下滚动时 .tall <paper-toolbar>变小了，我可以点击 <paper-toolbar>在 <little-game>/<paper-ripple>元素。

<paper-ripple> CSS:

paper-ripple {
z-index:1;}

主工具栏 html :

<paper-toolbar id="mainToolbar" class="tall">
      <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
      <span class="flex"></span>
      <!-- Toolbar icons -->
      <!--paper-icon-button icon="refresh"></paper-icon-button-->
      <paper-icon-button icon="more-vert"></paper-icon-button>
      <!-- Application name -->
      <div class="middle middle-container center horizontal layout">
        <div class="app-name">App title</div>
      </div>
      <!-- Application sub title -->
      <div class="bottom bottom-container center horizontal layout">
        <div class="bottom-title paper-font-subhead">App subtitle</div>
      </div>
    </paper-toolbar>

主工具栏 CSS :

#mainToolbar {
z-index:3;}

---

所以主要问题是我可以点击 <a href="#"><little-game></little-game></a>通过工具栏元素。

---

有一张图片可以更好地理解我在说什么:

Answer 1

我认为您需要取消点击事件的传播，例如尝试在纸质工具栏上添加点击事件处理程序

<paper-toolbar id="mainToolbar" class="tall" on-tap="{{cancelEvent}}">

然后添加取消它的功能

cancelEvent: function(event) {
  event.stopPropagation();
}