本文深入解析JavaScript中用于阻止浏览器默认行为的preventDefault()方法和用于阻止冒泡事件传播的stopPropagation()方法，通过实例演示如何在实际开发中应用这两个方法来优化用户体验。
1、preventDefault()方法
preventDefault()方法是用来阻止浏览器默认事件。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
</head>
<body>
<div class="content">
<input type="text" name="test" class="test" />
</div>
<script type="text/javascript">
//input的默认事件：点击input框时候会聚焦
//咱们要做的就是阻止dom元素的默认事件
var input = document.getElementsByClassName("test")[0] ;
input.addEventListener("mousedown",function(evt){
alert("执行了mousedown的事件!!") ;
//这里调用preventDefault()方法,就会阻止input框默认的聚焦事件
evt.preventDefault();
},false);
</script>
</body>
</html>
2、stopPropagation()方法
stopPropagation()方法是用来阻止冒泡事件。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<style type="text/css">
.out{
display:block;
width:200px ;
height:200px;
background-color:#8dEE23 ;
}
.inner{
display:block;
width:100px ;
height:100px;
background-color:#000000 ;
}
</style>
</head>
<body>
<div class="content">
<div class="out">
<div class="inner">
</div>
</div>
</div>
<script type="text/javascript">
//注意：冒泡事件是发生在父子元素之间
var out = document.getElementsByClassName("out")[0];
var inner = document.getElementsByClassName("inner")[0];
out.addEventListener("click",function(evt){
alert("触发了out的点击事件") ;
},false) ;
inner.addEventListener("click",function(evt){
alert("触发了inner的点击事件") ;
//在此处调用stopPropagation()会阻止冒泡事件
evt.stopPropagation() ;
},false) ;
</script>
</body>
</html>
要点：记住preventDefault是用来阻止浏览器的默认事件，stopPropagation是用来阻止冒泡事件(父子元素之间)，记住 这个，学习或开发的时候就不会混淆。
扫一扫
1211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
