There are two keypresses in the same jquery file. When pressing Enter, both are triggered.

I designed a single-page small application, a mini chat room.

As soon as you enter, there is a black screen, and then there is a small panel where you need to enter your name. There is a button next to it to confirm (the first keypress). After confirmation, the black screen and the panel disappear and you enter the page. The page is a chat room, which triggers Enter to send a message (the second keypress).

The problem now is that when entering the name panel, pressing Enter will trigger both keypresses above at the same time. But the selectors bound to my two keypresses are different.

P.S. In html, the type of both buttons is button.

Please give me an answer, thank you very much.

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

Add the code for the two button parts of the html:

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

I found the answer, just add an event to the enter event when submitting the user name .stopImmediatePropagation(); will do. Thank you for providing me with ideas.

The above is the detailed content of There are two keypresses in the same jquery file. When pressing Enter, both are triggered.. For more information, please follow other related articles on the PHP Chinese website!