Javascript 如何在单击工具栏内的纸张选项卡时取消核心工具栏点击事件

当我在瀑布模式下点击纸张标签上方的空间时，我想触发一个主页功能

    <core-header-panel mode="waterfall-tall">

        <core-toolbar class="animate" id="core_bar" on-tap={{home}}>

            <paper-tabs selected="0" self-end id="paper_tabs">
                <paper-tab>0</paper-tab>
                <paper-tab>1</paper-tab>
                <paper-tab>2</paper-tab>
                <paper-tab>3</paper-tab>
            </paper-tabs>

        </core-toolbar>

        <core-animated-pages transitions="slide-from-right" selected="{{ $.paper_tabs.selected }}" id="core_pages">

            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section>My home</section>

        </core-animated-pages>

    </core-header-panel>

0
1.
2.
3.
我家

这会触发home函数，但当我单击纸张选项卡时，home函数也会被调用。单击纸张选项卡时，如何取消主页功能

<script>
    Polymer('my-pages', {
        home:function(){
            this.$.paper_tabs.selected=4
        }
    });
</script>

聚合物（“my-pages”{
主页：函数（）{
此.$.paper\u tabs.selected=4
}
});

您可以这样做：

home: function(e) {
  // make sure this tap was on the core-toolbar itself
  if (e.target.localName === 'core-toolbar') {
    this.$.paper_tabs.selected = 4;
  }
}

但是，以这种方式引用

$纸张选项卡

不是一种好的做法。相反，请确定您的

my pages

具有

activePage

的属性，并将UI元素绑定到该属性。这样，您的逻辑和模板UI是松散耦合的

。。。
...
...
...
聚合物({
activePage:0，
主页：功能（e）{
如果（e.target.localName===‘核心工具栏’）{
this.activePage=4；
}
}
});

一般来说，尽量避免在模板中使用

id

。这意味着您的元素是数据驱动的，您可以在不接触脚本的情况下重新设计UI

...
<template>
...
            <paper-tabs selected="{{activePage}}" self-end>
...
        <core-animated-pages selected="{{activePage}}" transitions="slide-from-right">
...
</template>
<script>
  Polymer({
    activePage: 0,
    home: function(e) {
      if (e.target.localName === 'core-toolbar') {
        this.activePage = 4;
      }
    }
  });
</script>