Javascript 防止在JSF页面中双击

Javascript 防止在JSF页面中双击,javascript,jsf,Javascript,Jsf,我将在按说明单击后禁用该按钮 这是我的代码,但单击后无法禁用该按钮 <?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/

我将在按说明单击后禁用该按钮

这是我的代码,但单击后无法禁用该按钮

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:head>
    <title></title>

    <script language="JavaScript" type="javascript">
        function handleDisableButton(data) {
            if (data.source.type != "submit") {
                return;
            }

            switch (data.status) {
                case "begin":
                    data.source.disabled = true;
                    break;
                case "complete":
                    data.source.disabled = false;
                    break;
            }
        }

        jsf.ajax.addOnEvent(handleDisableButton);
    </script>

</h:head>
<h:body>

    <h:form>
        <h:inputText id="email" value="#{bean2.email}"/>

        <h:commandButton id="saveBtn" action="#{bean2.showClicked}" value="send">
            <f:ajax onevent="handleDisableButton"/>
        </h:commandButton>

    </h:form>
</h:body>
</html>

代码正是他喜欢的

工作正常。它只是提交表单太快了,你甚至没有注意到它实际上被禁用了很短的一段时间。在action方法中放置一个调试断点,或者在action方法中添加
Thread#sleep()
,这样您会更好地注意到它

考虑到您以当前的形式问这个问题,我知道您实际上希望在提交后永久禁用它,以便最终用户永远无法单击它?(请注意,这绝对不同于“双击预防”)

在这种情况下,请删除
complete
下面的代码行。这就是在ajax请求完成时重新启用按钮。这显然不是你想要的


与具体问题无关,
jsf.ajax.addOnEvent
基本上告诉jsf在每个
请求完成时执行给定的JS函数。然而,您在
中再次挂起它。这是不必要的。根据具体的功能需求,选择一个或另一个


而且,让JSF稍作停顿并多花一点时间学习也不是一个坏主意,这样您就可以通过简单地阅读JavaScript代码来了解实际的代码流。JSF不仅需要对Java和servlet有基本的了解,还需要对HTTP、HTML、CSS和JavaScript有基本的了解行,现在它在提交后未被禁用。IDE在
f:ajax onevent=“handleDisableButton”
中说:
表达式不是赋值或调用。您的代码对我来说运行得很好。对,您的
声明在带有XHTML doctype的Chrome中失败。摆脱
类型
语言
。你不需要它们。只需使用不带任何属性的
,最好与普通的HTML5 doctype一起使用
@ManagedBean
@SessionScoped
public class Bean2 {

private String email;

public void showClicked(){
    System.out.println("clicked");
}
//getter/setter for email
}