我怎样才能防止这种“点击”发生不止一次

How can I keep this "onclick" from happening more than once?

本文关键字：点击 不止一次      更新时间：2023-09-26

我正在尝试有一个按钮，单击该按钮时会打开一个区域以键入消息。我在 HTML 中使用"onclick"，我希望它只能点击一次。我不希望它在您单击它时继续制作更多的文本区域。

我在调用函数的 onclick 之后有一个 this.onclick="null"。这一直有效，直到我添加提交按钮。

所以这段代码有效：

.HTML：

<html>
<head>
    <script type="text/javascript" src="js/question.js"></script>
    <style type="text/css">
        #container {
            position: absolute;
            height: 443px;
            width: 743px;
            border: 1px solid black;
            border-radius: 0 0 20px 0;
            margin-top: 75px;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <button id="new_message" onclick="createMessage(), this.onclick=null;">New Message</button>
</body>
</html>

Javascript：

function createMessage() {
    var form = document.createElement("form");
    form.name = "form_input";
    form.method = "POST";
    form.action = "messages.php";
    container.appendChild(form);
    var textarea = document.createElement("textarea");
    textarea.name = "message_input";
    textarea.cols = 84; 
    textarea.rows = 16; 
    textarea.id = "message_input"; 
    container.appendChild(textarea);
};

但是当我保持 HTML 不变并将提交按钮添加到 javascript 中时，如下所示：

function createMessage() {
    var form = document.createElement("form");
    form.name = "form_input";
    form.method = "POST";
    form.action = "messages.php";
    container.appendChild(form);
    var textarea = document.createElement("textarea");
    textarea.name = "message_input";
    textarea.cols = 84; 
    textarea.rows = 16; 
    textarea.id = "message_input"; 
    container.appendChild(textarea);
    var submit = document.createElement("button");
    submit.innerHTML = 'Send';
    submit.id = 'send_message';
    container.appendChild(submit); 
    submit.onClick(messageAjax());
};

它再次开始复制。有什么办法可以防止这种快乐吗？

感谢您的帮助！

这是因为您的代码包含错误：

submit.onClick(messageAjax());

该属性为 onclick ，小写。 onClick不存在并引发错误。这可以防止按钮清除其自己的onclick，因为错误会导致脚本停止。

我不完全确定上面的行应该是什么。它似乎在调用messageAjax，然后立即将该函数的参数传递给submit.onClick...你也许是这个意思？

submit.onclick = messageAjax;

也许：

(function() {
    var open = false;
    function createMessage() {
        if( open ) return;
        var form = document.createElement("form");
        form.name = "form_input";
        form.method = "POST";
        form.action = "messages.php";
        container.appendChild(form);
        var textarea = document.createElement("textarea");
        textarea.name = "message_input";
        textarea.cols = 84; 
        textarea.rows = 16; 
        textarea.id = "message_input"; 
        container.appendChild(textarea);
        var submit = document.createElement("button");
        submit.innerHTML = 'Send';
        submit.id = 'send_message';
        container.appendChild(submit); 
        submit.onClick(messageAjax());
        open = true;
    };
})();

闭包避免了与 window.open（） 的名称冲突。你可以用不同的方式命名它，但它只是为了让你知道它。

相关文章：