1.司空见惯代码,在某一dom节点上注册事件方法
$("#btnResponse").click(Login);
$("#txtCode").keydown(ReturnKey);
2.非常正常的Login function,只是里面用了swal插件
代码执行效果就是我要的,点击btnResponse,当满足触发条件,弹出swal提示框,非常好.
function Login(e) { var loginUserId = $("#txtUserno").val(); //用户名 var passWord = $("#txtPassword").val(); //密码 var pCode = $("#txtCode").val(); //图形验证码 //验证必填项 if (loginUserId === null || loginUserId.trim() === "") { swal({ title: "失败", text: "账号不能为空", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "确定", closeOnConfirm: false }); return false; } //略...
3.没达到预期效果的ReturnKey方法设计,弹出swal提示框立刻刷掉,看了下Login和ReturnKey的区别,无非ReturnKey又套了一层,再调用Login方法
function ReturnKey(event) { if (event.keyCode == 13) { Login(); } }
说明:分析上面的代码,ReturnKey在执行完成Login之后, JS的"主执行"线程没有被接管,它继续执行,所以swal被刷掉了.
4.改动代码,达到预期效果, 回车之后,swal弹出框停留在页面.
function ReturnKey(event) { if (event.keyCode == 13) { Login();
return false; } }
5.在使用sweetalert开发时,在嵌套jQueryValiate插件验证时,希望jQueryValiate弹出sweetalert窗口后,窗口不要关闭,而是停留在页面.
推测是否需要阻止JS的事件传播,不让sweetalert监听到JS事件
//如果没有这2句,sweetAlert()会捕获事件,导致弹出窗口自动关闭 event.stopPropagation(); return false;