Es gibt zwei Tastendrücke in derselben JQuery-Datei. Wenn Sie die Eingabetaste drücken, werden beide ausgelöst.

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 zur Bestätigung (die erste). Nach der Bestätigung verschwinden der schwarze Bildschirm und das Panel und Sie gelangen auf die Seite. Die Seite ist ein Chatraum, der die Eingabetaste auslöst, um eine Nachricht zu senden (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 geben Sie mir Ihre 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 des HTML hinzu:

<div class="chat-room-input">
                        <form class="form-inline form-input">
                            <div 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>
                            </div>
                        </form>
                    </div>


<div class="alert alert-warning alert-dismissible" role="alert">
                        <form class="form-inline form-username">
                            <div 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>
                            </div>
                        </form>
                    </div>

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

 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");
        }
    });

Ich habe die Antwort gerade gefunden Senden Sie es einfach event.stopImmediatePropagation(); zum Eingabeereignis des Benutzernamens. Vielen Dank für die Idee.

Das obige ist der detaillierte Inhalt vonEs gibt zwei Tastendrücke in derselben JQuery-Datei. Wenn Sie die Eingabetaste drücken, werden beide ausgelöst.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!