当我使用添加到 header 的按钮时，如何防止手风琴面板折叠？

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>

问题是 - 当我单击该按钮时，整个手风琴选项卡将折叠。

我的问题是：如何防止 Accordion 在单击按钮时折叠？同时，当我点击 header 但在按钮之外时，我希望手风琴折叠。

我正在使用 PrimeFaces 5.3 和 JSF 2.2.11

Answer 1

取消绑定 headers 的所有事件，然后调用组件的 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>

Answer 2

正如@JorgeCampos 所建议的那样 - 我们可以使用 event.stopPropagation() 来防止事件从按钮到手风琴 "bubble"。有问题的代码的用法如下所示：

<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 -->
/>

停止事件传播不会干扰

当我使用添加到 header 的按钮时，如何防止手风琴面板折叠？

How to prevent Accordion Panel from collapsing when I use button added to header?

primefaces

jsf-2.2