JSF 命令按钮“onclick”事件不持久

Question

我想要一个可点击的图像，它会在鼠标悬停/移出/单击时发生变化。不用说，我希望在“onclick”之后页面不会重新加载。
我正在尝试使用 h:image 或 h:commandButton 来完成此操作 - 两者都无法按预期工作。 最烦人的是这个： 我的代码 bean 中有以下简单功能：

public String getClick()
{
    return "alert('abc')";
}

在 jsp 文件中，有以下代码：

<td><h:commandButton id="a" type="button" value="click" onclick="#{CodeBean.click}" /></td>
<td><h:commandButton id="b" type="button" image="/resources/empty.jpg" onclick="#{CodeBean.click}"  />

单击后，两者都会引发警报框，但是，只有第二个重新加载页面，而第一个则不会。不知道我与它有什么关系，但是当我查看编译页面的源代码时，我看到第一个按钮的类型保持“按钮”，但第二个按钮变成“图像”。

有什么建议吗？ 干杯， 埃雷兹

Answer 1

（和 ）的默认行为是提交父 POST 表单，该表单是由指定。

onclick 属性只允许开发人员在提交表单之前执行一段 JavaScript 代码。默认情况下，它不会阻止表单提交。如果您想阻止按钮的默认行为（提交表单），则需要将 return false; 添加到 onclick。

如果是 ，组件的 type 属性默认为 submit 并且它将生成一个 HTML 。当您将其更改为 button 时，它将变成一个“死”按钮，该按钮基本上不执行任何操作，期望执行附加到它的任何 JavaScript 处理程序，并且它将生成 HTML < ;输入类型=“按钮”>。当使用组件的 image 属性时，它将被转入图像映射，该映射允许您提交光标相对于图像的 X,Y 位置（但是，在您的情况下，您似乎想要只是一个背景图像；在这种情况下，您实际上应该使用 CSS background-image ），并且组件的 type 属性将被忽略将生成一个 HTML 。

这一切都清楚地记录在 标签文档。

如果您的唯一要求是阻止 提交父表单，那么您需要将 return false; 添加到onclick，如前所述：

<h:commandButton image="/resources/empty.jpg" onclick="#{CodeBean.click}; return false;" />

另一种方法是将 type="button" 与 CSS 背景图像结合使用（这样您就不会滥用 image 属性）：

<h:commandButton type="button" styleClass="emptyButton" onclick="#{CodeBean.click}" />

在 CSS 文件中包含以下内容，该文件由：

.emptyButton {
    background-image: url(#{resource['empty.jpg']});
}