Как предотвратить совпадение панели аккордеона при использовании кнопки, добавленной в заголовок?

Question

У меня проблема с Аккордеонной панелью. Я аккордеона похож на это:

<p:accordionPanel> 
    <p:tab title="tabTitle"> 
     <f:facet name="title"> 
      <!-- problematic button --> 
      <p:commandButton value="button"/> 
     </f:facet> 
     <h:PanelGrid> 
      <p>Accordion content</p> 
     </h:panelGrdi> 
    </p:tab> 
</p:accordionPanel> 

Проблема - при нажатии на кнопку, весь Аккордеон Tab разрушится.

Мой вопрос: Как предотвратить аккордеон от рутинного нажатия кнопки? В то же время я бы хотел, чтобы Accordion рухнул, когда я нажимаю на заголовок, но за пределами кнопки.

Я использую PrimeFaces 5.3 и JSF 2.2.11

Answer 1

Как был предложен @JorgeCampos - мы можем использовать event.stopPropagation() для того, чтобы предотвратить событие «пузырь» от кнопки к аккордеону. Использование для кода сообщения в вопросе будет выглядеть следующим образом:

<p:accordionPanel> 
    <p:tab title="tabTitle"> 
     <f:facet name="title"> 
      <p:commandButton value="button" onclick="event.stopPropagation();"/> 
     </f:facet> 
     <h:PanelGrid> 
      <p>Accordion content</p> 
     </h:panelGrdi> 
    </p:tab> 
</p:accordionPanel> 

Мы можем, конечно, использовать другие события, чтобы сделать что-то другое, или использовать actionListener для вызова метода из ManagedBean, используйте update. Например

<p:commandButton 
    value="button" 
    onclick="event.stopPropagation();" 
    oncomplete="PF('someDialog').show();" <!-- open dialog by js --> 
    actionListener="#{someBean.someMethod}" <!-- call java method --> 
    update="someComponent" <!-- update component --> 
/> 

распространения останавливая событие не будет мешать

Answer 2

разрывания все события ваших заголовков, а затем связать их снова вызвав init метод компонента.

<p:accordionPanel widgetVar="myAccordion"> 
    <p:tab title="tabTitle"> 
    <f:facet name="title"> 
     <!-- problematic button --> 
     <p:commandButton value="button" 
      onclick="PF('myAccordion').jq.find('.ui-accordion-header').unbind()" 
      oncomplete= "PF('myAccordion').init(PF('myAccordion').cfg)"/> 
    </f:facet> 
    <h:PanelGrid> 
     <p>Accordion content</p> 
    </h:panelGrdi> 
    </p:tab> 
</p:accordionPanel>