jsf - 如何在单击 JSF 按钮时调用 JS 函数并阻止页面重新加载/导航？

Question

使用 JSF 创建按钮以调用 JS 函数的首选方法是什么？

实际上我使用:

<p:button onclick="myJSFunction();" href="#"/>

但是我的 url 以 anchor 符号 (#) 为后缀。

是否有另一种推荐的方法来创建不会重新加载/导航到 URL 但会调用 JS 函数的按钮？

Answer 1

那是因为它实际上导航到 # .您需要阻止该按钮执行其默认操作，即导航至当前 View 或导航至 href 中指定的 URL。或 outcome .您可以通过添加 return false; 来实现此目的到 onclick 结束.

<p:button onclick="myJSFunction(); return false;" />

或者，如果 myJSFunction()实际上返回一个 boolean这应该确定按钮是否应该继续其默认操作，然后委托(delegate)给它:

<p:button onclick="return myJSFunction();" />

<h:button>工作方式完全相同，只是采用标准外观。

另一种方法是使用 <p:commandButton type="button"> ，它会生成一个真正的 <input type="button">没有任何导航。这样你就不需要从 onclick 返回 false .

<p:commandButton type="button" onclick="myJSFunction()" />

但这需要 <h:form> (尽管将它放在任何形式之外都不会破坏任何功能)。同样适用于<h:commandButton> .