onsubmit事件:
1、return false
2、event.preventDefault()适用于onsubmit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" id="form1">
<input type="text" name="username">
<input type="submit" value="submit">
</form>
<script>
var ele = document.getElementById("form1");
ele.onsubmit = function (event) {
alert(123);
// return false //方式一:返回false
event.preventDefault();//方式一:通过DOM Event(事件)调用preventDefault() =>通知浏览器不要执行与事件关联的默认动作。
}
</script>
</body>
</html>
阻止事件传播stopPropagation()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.outer{
300px;
height: 300px;
background-color: red;
}
.inner{
100px;
height: 100px;
background-color: #2459a2;
}
</style>
<body>
<div class="outer">
<div class="inner"> </div>
</div>
<script>
var outer_ele=document.getElementsByClassName("outer")[0];
var inner_ele=document.getElementsByClassName("inner")[0];
outer_ele.onclick=function () {
alert("outer")
}
//通过调用event事件(e为形式参数),阻止事件传播stopPropagation()
inner_ele.onclick=function (e) {
alert("inner")
e.stopPropagation()
}
</script>
</body>
</html>