Javascript onClick 事件只有一次

Javascript onClick event just once?

本文关键字：一次 onClick 事件 Javascript      更新时间：2023-09-26

我正在尝试实现一个评论系统。现在我有一个关于JS和onClick函数的问题。首先是代码：

<ul class="comments">
            <li>
                <div class="comment">
                    <div class="img-thumbnail" style="margin-left: -98px;">
                        <img class="avatar" alt="" src="img/avatars/noAvatar.jpg" style="width:50px;height:50px;">
                    </div>
                    <div class="comment-block-new" style="background-color:#fff;">
                        <div class="post-leave-comment" style="border:0px; margin:0px; padding:0px;">
                            <form action="" method="post">
                                <div class="row">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <textarea maxlength="500" rows="1" class="form-control" name="comment" id="comment" onClick="expandComment(this,this.form);">Post your comment...</textarea>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </li>

还有功能.js

function expandComment(inputC,formC){
    inputC.innerHTML = '';
    var showReplyOptions = '<div class="row" id="commentUserInfo" data-appear-animation="fadeInDown">'
    +                                '<div class="form-group">'
    +                                    '<div class="col-md-4">'
    +                                        '<label>Your name</label>'
    +                                        '<input type="text" value="" maxlength="100" class="form-control" name="name" id="name">'
    +                                    '</div>'
    +                                '</div>'
    +                            '</div>'
    +                            '<div class="row" id="commentPost" data-appear-animation="fadeInDown">'
    +                                '<div class="col-md-12">'
    +                                    '<input type="submit" value="Post Comment" class="btn btn-primary btn-lg" data-loading-text="Loading...">'
    +                                '</div>'
    +                            '</div>';
    formC.innerHTML = formC.innerHTML + showReplyOptions;
}

现在我希望扩展函数只运行一次。我需要创建ID的扩展动态原因和即将推出的回复系统。怎么做？

提前谢谢你。

您是否尝试为它添加标志？

var bExpandFunctionRunned = false;
function expandComment(inputC,formC){
    // it won't run again once the flag is set.
    if(bExpandFunctionRunned == false){
        bExpandFunctionRunned = true;
        inputC.innerHTML = '';
        var showReplyOptions = '<div class="row" id="commentUserInfo" data-appear-animation="fadeInDown">'
        +                                '<div class="form-group">'
        +                                    '<div class="col-md-4">'
        +                                        '<label>Your name</label>'
        +                                        '<input type="text" value="" maxlength="100" class="form-control" name="name" id="name">'
        +                                    '</div>'
        +                                '</div>'
        +                            '</div>'
        +                            '<div class="row" id="commentPost" data-appear-animation="fadeInDown">'
        +                                '<div class="col-md-12">'
        +                                    '<input type="submit" value="Post Comment" class="btn btn-primary btn-lg" data-loading-text="Loading...">'
        +                                '</div>'
        +                            '</div>';
        formC.innerHTML = formC.innerHTML + showReplyOptions;
    }
}

在元素 dataSet 中分配 flag 值的最佳方法，当事件调用时，请检查 flag value 函数，如果已经从函数顶部调用 return，请参见下面的代码

function expandComment(inputC,formC){
  /***return event code****/
    if(inputC.dataset.offclickevent === true)
       return;
    else
       inputC.dataset.offclickevent = true;
  /****************/

    inputC.innerHTML = '';
    var showReplyOptions = '<div class="row" id="commentUserInfo" data-appear-animation="fadeInDown">'
                                    '<div class="form-group">'
                                        '<div class="col-md-4">'
                                            '<label>Your name</label>'
                                            '<input type="text" value="" maxlength="100" class="form-control" name="name" id="name">'
                                        '</div>'
                                    '</div>'
                                '</div>'
                                '<div class="row" id="commentPost" data-appear-animation="fadeInDown">'
                                    '<div class="col-md-12">'
                                        '<input type="submit" value="Post Comment" class="btn btn-primary btn-lg" data-loading-text="Loading...">'
                                    '</div>'
                                '</div>';
    formC.innerHTML = formC.innerHTML + showReplyOptions;
}
相关文章：