JavaScript return false的作用

快乐打工仔 分类:实例代码

JavaScript return false的作用属于前端实例代码,有关更多实例代码大家可以查看

在js代码中,return false是return语句的一个特列,它不仅仅是返回一个布尔值,而且有独特的作用。

对于有经验的程序员来讲肯定不是问题,但是对于js初学者未必有良好的理解和掌握,下面就简单介绍一下return false语句的作用,先看一段代码实例:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.pipipi.net/" /> 
<title>return false语句的作用-犀牛前端部落</title> 
<style type="text/css"> 
a{text-decoration:none;} 
.height{ 
  height:1000px; 
  width:100px; 
  margin:0px auto; 
  background-color:green; 
  color:red; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
  document.getElementById("mytest").onclick=function(){ 
    alert("犀牛前端部落欢迎您"); 
  } 
} 
</script> 
</head> 
<body> 
  <div class="height">向下拖动,点击最下方文字</div> 
  <div style="text-align:center"><a href="#" id="mytest">点击弹出提示</a></div> 
</body> 
</html>

注:以上代码需要复制到本地测试,在此编辑器无法查看效果。

以上代码我想点击链接后,只是弹出一个提示框,为了防止页面的跳转,我们将链接的地址设置为#,不过点击之后的,表现还是和我们所期望的有一点点偏差,尽管弹出了提示框,也没有出现网页的跳转,但是网页返回了顶部,在大多数情况下,是需要在保持原来位置的,代码修改如下:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.pipipi.net/" /> 
<title>return false语句的作用-犀牛前端部落</title> 
<style type="text/css"> 
a{text-decoration:none;} 
.height{ 
  height:1000px; 
  width:100px; 
  margin:0px auto; 
  background-color:green; 
  color:red; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
  document.getElementById("mytest").onclick=function(){ 
    alert("犀牛前端部落欢迎您"); 
    return false; 
  } 
} 
</script> 
</head> 
<body> 
  <div class="height">向下拖动,点击最下方文字</div> 
  <div style="text-align:center"><a href="#" id="mytest">点击弹出提示</a></div> 
</body> 
</html>

避免了上一段代码出现问题,因为在alert语句后面添加了return false。

这里return语句的作用是阻止默认动作的执行。

JavaScript return false的作用,这样的场景在实际项目中还是用的比较多的,关于JavaScript return false的作用就介绍到这了。

回复

我来回复
  • 暂无回复内容