在工具栏点击bug下的Polymer 1.0 a / custom元素

时间:2015-07-23 12:07:02

标签: html css css3 polymer polymer-1.0

我遇到了一些由我创建的自定义元素的问题,称为<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>

这个元素的主持人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;}


mainToolbar 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>

mainToolbar css:

#mainToolbar {
z-index:3;}

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

有一个图像可以更好地理解我在说什么:
Image that explains a Polymer-Project issue about z-indexing

1 个答案:

答案 0 :(得分:1)

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

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

然后添加取消它的功能

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