JavaScript中function 之return false的理解(实例代码)

时间:2024-01-20 08:12:03

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;