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;