时间:2021-07-01 10:21:17 帮助过:15人阅读
一进去是一个黑幕,然后有一个小面板需要输入名字,旁边有一个按钮确认(第一个keypress),确认之后黑幕和面板都消失,进入页面。页面是个聊天室,触发回车发送消息(第二个keypress)。
现在的问题是,在输入名字那个面板时,按回车会同时把上面的两个keypress都触发了。但我两个keypress绑定的选择器都是不一样的。
P.S.在html内,两个button的type都是button。
求大大解答,非常感谢。
代码:
//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"); } });
补上html两个button部分的代码:
<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"); } });
我找到答案了,只要在提交用户名的那个回车事件添加一个event.stopImmediatePropagation();就可以了,感谢你提供了思路给我。
以上就是jquery同一个文件下有两个keypress按回车时两个都触发了的详细内容,更多请关注Gxl网其它相关文章!