Maison > interface Web > js tutoriel > Il y a deux touches dans le même fichier jquery lorsque vous appuyez sur Entrée, les deux sont déclenchées.

Il y a deux touches dans le même fichier jquery lorsque vous appuyez sur Entrée, les deux sont déclenchées.

黄舟
Libérer: 2017-06-27 14:06:08
original
1619 Les gens l'ont consulté

J'ai conçu une petite application d'une seule page, un mini salon de discussion.

Dès que vous entrez, il y a un écran noir, puis il y a un petit panneau où vous devez entrer votre nom. À côté se trouve un bouton pour confirmer (le premier. (appui sur la touche). Après confirmation, l'écran noir et le panneau disparaissent et vous entrez dans la page. La page est une salle de discussion, qui déclenche Entrée pour envoyer un message (la deuxième pression sur une touche).

Le problème maintenant est que lorsque vous entrez dans le panneau de nom, appuyer sur Entrée déclenchera les deux touches ci-dessus en même temps. Mais les sélecteurs liés à mes deux touches sont différents.

P.S. En HTML, le type des deux boutons est bouton.

S'il vous plaît, donnez-moi votre réponse, merci beaucoup.

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");
        }
    });
Copier après la connexion

Ajoutez le code pour les deux parties de boutons du 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>
Copier après la connexion
formUsername.keypress(function(event) {        if(event.keyCode === 13) {            event.preventDefault();
            okay.trigger("click");
        }        event.stopImmediatePropagation();
    });
Copier après la connexion
 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");
        }
    });
Copier après la connexion

J'ai trouvé la réponse, juste soumettez-le Ajoutez simplement event.stopImmediatePropagation(); à l'événement enter du nom d'utilisateur Merci de m'avoir donné l'idée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal