Question

我在treenode中有带有按钮和输出文本的素面树。 Ajax行选择事件调用按钮的呈现。该按钮具有质朴的疲倦菜单，单击该菜单时必须显示该菜单。问题在于，单击按钮会调用行选择事件，并且按钮会重新呈现，并且菜单消失。

            <p:tree id="tree1" value="#{treeDNDView.root1}" var="node" selectionMode="single"
                    selection="#{treeDNDView.selectedNode1}">
                <p:ajax event="select" update=" mainform:tree1"/>
                <p:treeNode>
                    <h:panelGrid columns="3" columnClasses="width-5pct,verticalLine,width-95pct">
                        <p:outputPanel>
                            <p:commandButton id="dynaButton" value="Show" rendered="#{treeDNDView.selectedNode1.data eq node}" type="button"/>
                            <p:tieredMenu id="treeNodePanel" overlay="true" trigger="dynaButton" my="left top" at="left bottom">
                                <p:menuitem value="Save" action="#{menuView.save}"/>
                            </p:tieredMenu>
                        </p:outputPanel>
                        <p:spacer width="5px"/>
                        <p:outputPanel>
                            <h:outputText value="#{node}" escape="false"/>
                        </p:outputPanel>
                    </h:panelGrid>
                </p:treeNode>
            </p:tree>

在这种情况下，如何区分按钮单击和行选择事件？如何重写代码以使功能正常运行？

Answer 1

将.stopPropagation()添加到on click事件中即可解决该问题。

                <p:outputPanel>
                    <div onclick="(function(e) { e.preventDefault(); e.stopPropagation(); })(event)">
                        <p:commandButton id="dynaButton" value="Show" rendered="#{treeDNDView.selectedNode1.data eq node}" type="button"/>
                        <p:tieredMenu id="treeNodePanel" overlay="true" trigger="dynaButton" my="left top" at="left bottom">
                            <p:menuitem value="Save" action="#{menuView.save}"/>
                        </p:tieredMenu>
                    </div>
                </p:outputPanel>

单击按钮后如何在素面树中停止行选择

1 个答案: