首页 > Web开发 > 详细

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

时间:2020-07-11 20:10:10      阅读:42      评论:0      收藏:0      [点我收藏+]

 

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{
width: 300px;
height: 300px;
background-color: red;
}


.inner{
width: 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>

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

原文:https://www.cnblogs.com/hhqdsj/p/13285078.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!