JS之onsubmit事件与阻止事件外延

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>
原文地址:https://www.cnblogs.com/hhqdsj/p/13285078.html