Question

我希望有一个可点击的图片，可以在翻转/翻转/点击时更改。不用说，我希望在'onclick'之后页面不会重新加载我试图用h：image或h：commandButton来完成这个 - 两者都不能按预期工作。最讨厌的是这个：我在我的code-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

<h:commandButton>（和<h:commandLink>）的默认行为是提交由<h:form>指定的父POST表单。

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

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

tag documentation的编码行为部分清楚地记录了这一点。

如果您的唯一要求是阻止<h:commandButton type="image">提交父表单，那么您需要在onclick中添加return false;，如前所述：

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

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

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

在<h:outputStylesheet>加载的CSS文件中包含以下内容：

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

JSF commandButton'onclick'事件不是持久的

1 个答案: