javascript – Es gibt zwei Tastendrücke unter derselben JQuery-Datei, und beide werden durch Drücken der Eingabetaste ausgelöst.

Question

Ich habe eine kleine einseitige Anwendung entworfen, einen Mini-Chatroom.

Sobald Sie eintreten, erscheint ein schwarzer Bildschirm und dann ein kleines Feld, in das Sie Ihren Namen eingeben müssen. Daneben befindet sich eine Schaltfläche zum Bestätigen (der erste Tastendruck). Das Panel verschwindet und Sie betreten die Seite.
Die Seite ist ein Chatraum, der durch Drücken der Eingabetaste zum Senden einer Nachricht ausgelöst wird (der zweite Tastendruck).

Das Problem besteht nun darin, dass beim Aufrufen des Namensfelds durch Drücken der Eingabetaste beide oben genannten Tastendrücke gleichzeitig ausgelöst werden. Aber die an meine beiden Tastendrücke gebundenen Selektoren sind unterschiedlich.

P.S. In HTML ist der Typ beider Schaltflächen „Schaltfläche“.

Bitte gib mir eine ausführliche Antwort, vielen Dank.

Code:

//get username
    function getUsername(){
        blackScreen.fadeOut("slow");
        return $("#input-username").val();
    }
    okay.click(getUsername);
    //send msg to database by enter
    formUsername.keypress(function(event) {
        if(event.keyCode === 13) {
            event.preventDefault();
            okay.trigger("click");
        }
    });
    
    //get time
    function getTime() {
        var mydate = new Date();
        var year = mydate.getFullYear();
        var month = mydate.getMonth() + 1;
        var day = mydate.getDate();
        var hour = mydate.getHours();
        var minute = mydate.getMinutes();
        var second = mydate.getSeconds();
        //standardize time
        function stdTime(s) {
            if(s < 10) {
                return "0" + s;
            } else {
                return s;
            }
        };
        return year + "/" + stdTime(month) + "/" + stdTime(day) + " " + stdTime(hour) + ":" + stdTime(minute) + ":" + stdTime(second);
    }

    //send msg to database by click
    inputBtn.click(function() {

        var inputMsg = $("#input-value").val();

        //push msg to database
        msgs.push({
            "name": getUsername(),
            "time": getTime(),
            "msg": inputMsg
        });
        $("#input-value").val("");

    });

    //send msg to database by enter
    inputForm.keypress(function(event) {
        if(event.keyCode === 13) {
            event.preventDefault();
            inputBtn.trigger("click");
        }
    });

Fügen Sie den Code für die beiden Schaltflächenteile von HTML hinzu:

<p class="chat-room-input">
                        <form class="form-inline form-input">
                            <p class="form-group">
                                <input type="text" class="form-control" id="input-value" placeholder="来一起吐槽~" maxlength="80">
                                <button type="button" class="btn btn-default" id="input-send">
                                    <span class="glyphicon glyphicon-send" aria-hidden="true"></span>
                                </button>
                            </p>
                        </form>
                    </p>


<p class="alert alert-warning alert-dismissible" role="alert">
                        <form class="form-inline form-username">
                            <p class="form-group">
                                <input type="text" class="form-control" id="input-username" placeholder="骚年！留下大名！" maxlength="10" autofocus="autofocus">
                                <button type="button" class="btn btn-default okay">OK</button>
                            </p>
                        </form>
                    </p>

Answer 1

 formUsername.keypress(function(event) {
     event.stopPropagation();  //防止事件冒泡
        if(event.keyCode === 13) {
            event.preventDefault();
            okay.trigger("click");
        }
    });
      inputForm.keypress(function(event) {
       event.stopPropagation();//防止事件冒泡
        if(event.keyCode === 13) {
            event.preventDefault();
            inputBtn.trigger("click");
        }
    });

Answer 2

formUsername.keypress(function(event) {
        if(event.keyCode === 13) {
            event.preventDefault();
            okay.trigger("click");
        }
        event.stopImmediatePropagation();
    });

搞定，谢谢楼上的回答。