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

Question

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

实际上我使用：

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

但我的网址以锚符号 ( #) 为后缀。

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

Answer 1

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

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

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

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

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

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

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

然而，这需要一个<h:form>（尽管将它放在任何形式之外都不会破坏任何功能）。这同样适用于<h:commandButton>。