2015-11-10 6 views
0

У меня есть бумажное меню с бумажными товарами. Каждый элемент содержит бумажную кнопку. Событие клика/нажатия кнопки «бумага» срабатывает, только если кнопка не находится внутри выбранного бумажного элемента.Polymer - Как было активировано событие после пункта меню бумаги.

<body> 
    <template is="dom-bind" id="root"> 
    <paper-menu> 
     <paper-item> 
     Item 1 
     <paper-button id="button_1" on-tap="tapAction" raised>Button 1</paper-button> 
     </paper-item> 
     <paper-item> 
     Item 2 
     <paper-button id="button_2" on-tap="tapAction" raised>Button 2</paper-button> 
     </paper-item> 
     <paper-item> 
     Item 3 
     <paper-button id="button_3" on-tap="tapAction" raised>Button 2</paper-button> 
     </paper-item> 
    </paper-menu> 
    </template> 

    <script> 
    var root = document.querySelector("#root"); 

    root.tapAction = function(e) { 
     console.log("tapAction: ", e.target.id) 
    }; 

    </script> 
</body> 

Смотрите также: http://plnkr.co/edit/vZk8gwLOxh6hxyiGPiu5

Как я могу вызвать нажмите/TAP события на полимерный компонент, как папье-кнопки после выбора пункта меню?

ответ

1

The

<paper-item> 

, кажется, блокирует активацию ваших

<paper-button> 

элементов. Вы можете преодолеть это двумя способами. Во-первых, вы можете использовать это событие железо реактивировать из

<paper-menu> 

как так

<paper-menu on-iron-activate="tapAction"> 
    ... 
</paper-menu> 

или вы можете удалить

<paper-item> 

оберток от около

<paper-button> 

, который будет позволяют им активироваться.

<paper-menu> 
    <div> 
    Item 1 <paper-button id="button_1" on-tap="tapAction" raised>Button 1</paper-button> 
    </div> 
    <div> 
    Item 2 
    <paper-button id="button_2" on-tap="tapAction" raised>Button 2</paper-button> 
    </div> 
    <div> 
    Item 3 
    <paper-button id="button_3" on-tap="tapAction" raised>Button 2</paper-button> 
    </div> 
</paper-menu> 

И я не думаю, что вам нужно беспокоиться о выполнении

var root = document.querySelector("#root"); 

в

<template is="dom-bind" id="root"> 
    ... 
</template> 

уже делает это для вас, так что вы должны быть в состоянии уйти только с это

<script> 
    root.tapAction = function(e) { 
     console.log("tapAction: ", e.target.id) 
    }; 
</script> 

U Бновить:

Решение удаления

<paper-item> 

и заменить его

<div> 

имеет свои проблемы, как только это, кнопка выбранные элементы больше не смогут быть активированы. Не спрашивайте меня, почему, поскольку я только что открыл это сам. Раствор железа реактивировать все равно будет срабатывать, даже если выбран пункт, но event.target будет

<paper-menu> 

и в то время как вы можете использовать выбранный атрибут, чтобы выяснить, какой элемент выбран, он всегда будет на один шаг ниже фактического выбранного элемента.Так что если вы выбрали пункт 1, то выбранный первоначально будет неопределенным, если вы не выбрана предмета

<paper-menu selected="0"> 

, но даже в этом случае, если вы выберете другой элемент, выбранный элемент в обожженной случае еще будет предыдущий , Вы должны будете экспериментировать, но я мог бы предложить вам попробовать что-то другое, а

<paper-menu> 

может не соответствовать цели вы хотели использовать его для, если Вы желаете использовать

<paper-button> 

элементов.