我遇到了一些由我创建的自定义元素的问题,称为<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>
元素。答案 0 :(得分:1)
我认为您需要取消传播中的点按事件,尝试在纸质工具栏上添加点击事件处理程序,例如
<paper-toolbar id="mainToolbar" class="tall" on-tap="{{cancelEvent}}">
然后添加取消它的功能
cancelEvent: function(event) {
event.stopPropagation();
}