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

Question

在JSF中，使用何种方式调用JS函数创建按钮是首选的？

实际上，我使用以下方法：

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

但我的URL以锚点符号（#）结尾。

请问是否有其他推荐的方法来创建按钮，使其不会重新加载/导航到URL，而是调用JS函数？

- Olivier J.

Answer 1

这是因为它实际上正在导航到“#”。你需要阻止按钮执行其默认操作，即导航到当前视图或到在“href”或“outcome”中指定的URL。您可以通过在“onclick”的结尾添加“return false;”来实现这一点。

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

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

<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>也是如此。

- BalusC

---

我错了，你在另一篇帖子中已经告诉过我return false;的方法...而我却忘记了！像往常一样，它非常有效，谢谢！ - Olivier J.