什么情况下使用JavaScript中的preventDefault()和return false

在JavaScript中，有两种方法- preventDefault() 和 return false，它们用于停止默认浏览器行为，但它们的功能和用途略有不同。本文说明了这两个方法的区别。

JavaScript preventDefault()方法：

该方法会停止事件（如果可以停止），意味着事件的默认操作不会发生。它只是阻止了默认的浏览器行为。开发人员在许多情况下使用preventDefault()，例如：

点击链接时，阻止链接跳转
点击复选框时，阻止复选框的切换
点击“提交”按钮时，阻止表单提交

返回false：

返回false遵循三个步骤：

首先，它停止了浏览器的默认行为。
它阻止事件在DOM中传播。
当调用时，它停止回调函数的执行并立即返回。

开发人员在许多不同的情况下使用return false，例如：

根据布尔值（true或false）来判断，如果一个表单字段（fname）为空，则函数会弹出一条消息并返回false，以阻止表单提交。
为了避免冒泡（将事件从子元素传播到父元素），开发人员开始使用return false语句来阻止此类传播。

注意： 这与常规（非jQuery）事件处理程序的行为不同，尤其是return false不会阻止事件冒泡。从常规DOM事件处理程序返回false实际上没有任何作用。

以下是一些示例来演示上述情况：

示例1： 没有preventDefault()和return false的行为

<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
 
    <h2>without PreventDefault() and return false</h2>
    <div onclick='GeekParent()'>
        <a href='#' onclick='GeekChild()'>
            Click here
        </a>
    </div>
    <br>
    <br>
    <script>
        function GeekChild() {
            alert('Link Clicked');
        }
         
        function GeekParent() {
            alert('div Clicked');
        }
    </script>
</body>

输出：

什么情况下使用JavaScript中的preventDefault()和return false

解释： 由于没有提到停止链接的条件，所以链接会执行其默认操作。

示例2： 使用PreventDefault()

<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <h2> PreventDefault( ) </h2>
    <div onclick='GeekParent()'>
        <a href='https://ide.geeksforgeeks.org'
           onclick='GeekChild()'>
            Click here to visit GeeksforGeeks.com
          </a>
    </div>
    <br>
    <br>
    <script>
        function GeekChild() {
            event.preventDefault();
            event.currentTarget.innerHTML = 'Click event prevented'
            alert('Link Clicked');
        }
         
        function GeekParent() {
            alert('div Clicked');
        }
    </script>
</body>

输出：

什么情况下使用JavaScript中的preventDefault()和return false

解释： 输出中，链接的默认功能即连接到另一个网站已被停止。相反，使用preventDefault方法显示一个警报。

示例3： 根据布尔值（true或false）返回false

<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<body style="text-align:center;">
    <h2>Form must be filled</h2>
    <h5>otherwise return false stop event</h5>
    <form name="myForm"
          onsubmit="return validateForm()"
          method="post">
        Name:
        <input type="text" name="fname">
        <input type="submit" value="Submit">
    </form>
    <script>
        function validateForm() {
            var x = document.forms["myForm"]["fname"].value;
            if (x == "") {
                alert("Name must be filled out");
                return false;
            }
        }
    </script>
</body>

输出:

什么情况下使用JavaScript中的preventDefault()和return false