老师,这个小案例js中的return false怎么理解呀?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>意见反馈</title>
<style>
@charset "utf-8";
/*css document*/
*{ /*清除页面中默认的内外边距*/
padding: 0;
margin: 0;
}
.cont { /*设置页面总体样式*/
margin: 20px auto; /*设置总体外边距*/
width: 975px; /*设置页面整体的宽度*/
height: 360px; /*设置页面整体高度*/
border: 1px solid #f00; /*设置页面的边框*/
}
h3{ /*设置页面中标题的样式 */
padding: 10px 20px; /*设置标题的内边距*/
color: rgb(57,85,153); /*设置标题文字的文字颜色*/
background: rgb(231,241,251);/*设置标题的背景颜色*/
}
.content{ /*设置文本输入部分的整体样式*/
margin-top: 40px; /*设置向上的外边距*/
}
.content>div{ /*设置两个文本输入部分的样式*/
margin-top: 20px; /*设置向上的外边距*/
}
.content>div>p{ /*设置提示文字的样式*/
margin-left: 20px; /*设置向左的外边距*/
width: 80px; /*设置宽度*/
line-height: 30px; /*设置行高*/
float: left; /*设置浮动方式*/
letter-spacing: 10px; /*设置文字间的水平间距*/
}
.content>div>input[type="text"]{/*设置单行文本框的样式*/
width: 670px; /*设置单行文本框的宽度*/
height: 30px; /*设置单行文本框的高度*/
}
.content>:last-child>p{ /*设置文本域提示文字的样式*/
margin-top: 10px; /*设置向上的外边距*/
}
.content>:last-child>div>div{/*设置版权声明部分的样式*/
height: 100px; /*设置宽度*/
width: 815px; /*设置高度*/
color: #999; /*设置文字颜色*/
margin: -2px 102px; /*设置外边距*/
border: 1px solid #AEBDCC;/*设置边框*/
}
.content span{ /*设置提示文字的边距*/
font-size: 12px; /*设置字体大小*/
color: #f00; /*设置文字颜色*/
display: none; /*将文字设置为隐藏*/
}
.content>:last-child>:last-child>:last-child{
margin:10px 100px; /*设置文本域部分的提示文字的样式*/
}
.typein{ /*设置文本域部分的样式*/
position: relative; /*清除页面中默认的内外边距*/
}
textarea{ /*设置文本域的样式*/
position: absolute; /*设置定位方式*/
width: 815px; /*设置宽度*/
height: 100px; /*设置高度*/
display: none; /*设置文本域隐藏*/
}
.cont>:last-child{ /*设置按钮部分的整体样式*/
margin: 20px 100px; /*设置外边距*/
}
input[type="button"]{ /*设置按钮的样式*/
background: rgb(211,230,245);/*添加背景颜色*/
width: 100px; /*设置宽度*/
height: 35px; /*设置高度*/
}
</style>
</head>
<body>
<div class="cont">
<h3>您好,我是明日科技的产品经理,欢迎您给我们提出产品的使用感受和建议</h3>
<div class="content">
<div>
<p>标题:</p>
<input type="text" placeholder="请输入4~30个字符" id="input">
<span id="title">请输入4~30个字符</span>
</div>
<div>
<p>内容:</p>
<div>
<img src="img/edit.png" alt="">
<div class="typein">
<textarea id="type"></textarea>
<div onclick="typeIn()">感谢您给我们提出建议<br/>抱歉我们不能逐一回复您的意见<br>您的感受和建议一旦再次发表,
即表示您同意我们可无偿参考您的感受和建议来优化我们的产品和服务。若您有商业合作意向,请联系公司相关业务部门</div>
</div>
<span id="letternum">请输入10~10000个字符</span>
</div>
</div>
</div>
<div>
<input type="button" value="发表" onclick="checkTitle()">
<input type="button" value="保存">
</div>
</div>
<script>
function checkTitle() {
var title1 = document.getElementById("input").value;//获取单行文本框
var declare = document.getElementById("type").value;//获取文本域
if ((title1.length < 4) || (title1.length > 30)) {//判断文本框中的内容长度是否符合要求
document.getElementById("title").style.display = "inline";//如果不符合,弹出提示语句
return false
}
if ((declare.length < 10) || (declare.length > 10000)) {//判断文本域中内容和长度是否符合要求
document.getElementById("letternum").style.display = "block";//如果不符合,弹出提示语句
return false
}
}
function typeIn() {
document.getElementById("type").style.display = "block";//当点击页面中的版权声明时,将文本域设为显示
document.getElementById("type").focus() //设置文本域获取焦点
}
</script>
</body>
</html>
正在回答
同学你好,在7-5中,return true 、return false 表示函数的返回值可以是布尔值,在老师举的这个例子中:return false 结合语境来讲,表示如果验证不通过(if条件不通过),退出函数。
而同学举个这个例子,应该也是退出函数的意思,因为点击“
<input type="button" value="发表" onclick="checkTitle()">”的时候,不会有默认的行为,也不会冒泡。
return false 作用就是退出函数、阻止默认行为、阻止冒泡。但是具体起到什么作用,要看用在哪里,比如说7-5中,作用是退出函数;比如说用到老师第二条回复中的a标签上,就是阻止默认行为。主要是要看语境来理解哦。
另,为了答疑的准确性,建议同学在相关的章节中提问,这样不仅可以准确找到问题所在,也可以节省同学的时间哦。
祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星