捕获所有点击事件，隐藏其他包含的元素

Question

<app-drawer-layout fullbleed>

    <!-- Drawer content -->
    <app-drawer swipe-open>I have the following code:

      <iron-selector selected="[[page]]" class="drawer-list" role="navigation" attr-for-selected="name" id="menu-main" on-iron-select="_selectionEvent" >

        <!-- First link. With overlapping DIV -->
        <a style="position: relative" name="view1" href="/page/view1">
          <div drawer-toggle style="position: absolute;top:0;bottom:0;left:0;right:0"></div>
          <iron-icon icon="home"></iron-icon>
          <span>View One</span>
        </a>

        <!-- Second link. Drawer only goes away when the click is on the span -->
        <a name="view2" href="/page/view2">
          <iron-icon icon="question-answer"></iron-icon>
          <span drawer-toggle >View Two</span>
        </a>

        <!-- Third link. Works but it's a lot of typing... -->
        <a drawer-toggle name="view3" href="/page/view3">
          <iron-icon drawer-toggle icon="work"></iron-icon>
          <span drawer-toggle>View Three</span>
        </a>
      </iron-selector>
      ...

这是一个聚合物元素，但除了这个问题之外。重要的是，铁选择器会监听点击，并且当对具有drawer-toggle属性的元素进行单击时，app-drawer-layout会缩回抽屉（这就是我想要的）。

view2中的问题是，当您在跨度中单击完全时，抽屉只会缩回。 view3是很多打字，但这也有效。 view1通过创建与所有其他所有内容重叠的div来解决问题。所以，只需要设置drawer-toggle。

现在......那太可怕了吗？它会产生我无法预测的副作用吗？有一个不错的选择吗？