阻止事件发生2种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a οnclick="return ClickOn()" href="http://www.baidu.com">dianwo</a>
<a id="i1" href="http://www.baidu.com">赞</a>
<script src="jquery-1.12.4.js"></script>
<script>
//给a标签添加click事件,而a标签自带href,所以,点击a标签,会执行click中的功能,然后跳转到百度,但是,如果你在功能中
//return false,则不会跳转,下面是click绑定后阻止事件发生的2中写法
function ClickOn() {
alert(123);
return false;
}
$('#i1').click(function(){
alert(456);
// return false;
})
</script>
</body>
</html>
事件发生顺序
默认事件先执行:
checkbox 比如:以下例子,点击按钮,会先输出true。解析:开始checked:false;点击按钮,checked改成true;然后执行click事件,输出true
<input type="checkbox" />
<script src="jquery-1.12.4.js"></script>
<script>
$(':checkbox').on('click',function(){
console.log($(':checkbox').prop('checked'));
})
</script>
自定义先执行
a标签
submit提交
...
表单提交示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error_color{
color: red;
padding-left:10px;
}
</style>
</head>
<body>
<form id="f1" action="http://www.baidu.com" >
<div><input id='i1' name="n1" tex = "用户名" type="text" /></div>
<div><input name="n2" tex = "密码" type="password" /></div>
<div><input name="n3" tex = "邮箱" type="text" /></div>
<div><input name="n4" tex = "端口" type="text" /></div>
<div><input name="n5" tex = "IP" type="text" /></div>
<input type="submit" value="提交" />
<!--<img src="...">-->
</form>
<script src="jquery-1.12.4.js"></script>
<script>
// 当页面框架加载完毕后,自动执行, 我还不知道这是为啥?
// $(function(){
// $.Login('#f1')
// });
$(':submit').on('click',function(){
//删除标记的span标签,用以重新判断
$('.error_color').remove();
var flag = true;
//获取input的值并判断是否为空,如果为空,则标记出来
$('#f1').find('input[type="text"],input[type="password"]').each(function(){
var v1 = $(this).val();
if(v1.length==0){
flag = false;
var s = document.createElement('span');
s.innerText = '必填';
s.className = 'error_color'; //DOM添加css样式
$(this).after(s);
// return false; //如果这里写return false,只是跳出当前的each循环,而这个click事件仍是return true;所以还是会跳转百度。所以需要添加一个flag
}
});
return flag;
});
</script>
</body>
</html>