老师,这个小案例js中的return false怎么理解呀?

老师,这个小案例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>


正在回答

登陆购买课程后可参与讨论,去登陆

4回答

同学你好,在7-5中,return true 、return false 表示函数的返回值可以是布尔值,在老师举的这个例子中:return false 结合语境来讲,表示如果验证不通过(if条件不通过),退出函数。

http://img1.sycdn.imooc.com//climg/5f16a2b2095dd33203750243.jpg

而同学举个这个例子,应该也是退出函数的意思,因为点击“

<input type="button" value="发表" onclick="checkTitle()">”的时候,不会有默认的行为,也不会冒泡。

return false 作用就是退出函数、阻止默认行为、阻止冒泡。但是具体起到什么作用,要看用在哪里,比如说7-5中,作用是退出函数;比如说用到老师第二条回复中的a标签上,就是阻止默认行为。主要是要看语境来理解哦。

另,为了答疑的准确性,建议同学在相关的章节中提问,这样不仅可以准确找到问题所在,也可以节省同学的时间哦

祝学习愉快~

提问者 慕村梦花火 2020-07-21 15:36:59

老师,不好意思哈,我可能没有表达清楚,我的问题是,js函数深入讲解中,第七章函数的返回值中7-5,什么可以做返回值4分50秒的问题,我找了个表单验证的相关例子,return false是阻止将用户所填的数据发送至了服务端了吗?

好帮手慕码 2020-07-21 15:08:21

同学你好,这里简单举个例子:a标签有点击之后跳转的默认行为,那么添加return false 之后,就阻止了跳转。如下:

http://img1.sycdn.imooc.com//climg/5f16939909d5b10708380125.jpg

另,查看同学的代码与本章节无关,建议同学详细描述一下是哪节课(视频)的代码。以便准确帮助同学解答。

祝学习愉快~

好帮手慕码 2020-07-21 10:16:23

同学你好,return false 的作用是:阻止默认行为和事件冒泡。

祝学习愉快~

  • 提问者 慕村梦花火 #1
    阻止默认行为怎么理解?视频中老师说这是表单验证,这又怎么理解?
    2020-07-21 12:11:05
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师