何时在 JavaScript 中使用 PreventDefault() 与 Return false？

在 Javascript 中，有两种方法 - preventDefault()和Return false ，用于停止默认浏览器行为，但它们的功能和用途略有不同。本文展示了这两者有何不同？

防止默认（）

如果该事件是可停止的，则此方法将其停止，这意味着属于该事件的默认操作将不会发生。它只是阻止默认浏览器行为。开发者在很多情况下使用 preventDefault() 例如，

• 单击链接时，防止链接跟随 URL
• 单击复选框时，防止切换复选框
• 单击“提交”按钮时，阻止其提交表单

返回假

Return false 遵循三个步骤

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

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

• 取决于布尔值（true 或 false） 如果表单字段 (fname) 为空，则函数会提醒消息并返回 false，以防止表单被提交。
• 为了避免冒泡（这使得事件从子元素传播到父元素），开发人员已经开始使用 return false 语句来阻止这种传播。

注意：此行为与普通（非 jQuery）事件处理程序不同，其中，值得注意的是，return false 不会阻止事件冒泡。从常规 DOM 事件处理程序返回 false 绝对没有任何作用。

以下是一些示例来证明上述内容：

示例 1：没有 PreventDefault( ) 和 Return false 的行为

  

    
        without PreventDefault( ) or Return false
    
    
        function GeekChild() {
            alert('Link Clicked');
        }
  
        function GeekParent() {
            alert('div Clicked');
        }
    

  

  
      
                GeeksForGeeks  
            
  
     PreventDefault( ) 
    
        Click here to visit GeeksforGeeks.com
    
    
    

  

输出：

• 在点击链接之前
  
• 点击链接后
  
• 再次点击后
  
  
  链接将作为浏览器的默认行为打开。
  

示例 2 ：使用 PreventDefault()

  

    
        without PreventDefault( )
    
    
        function GeekChild() {
            event.preventDefault();
            event.currentTarget.innerHTML = 'Click event prevented'
            alert('Link Clicked');
        }
  
        function GeekParent() {
            alert('div Clicked');
        }
    

  

  
      
                GeeksForGeeks  
            
  
     PreventDefault( ) 
    
        Click here to visit GeeksforGeeks.com
    
    
    

  

输出：

• 在点击链接之前
  
• 点击链接后
  
• 再次点击后
  
• PreventDefault() 改变默认行为
  

示例 3：使用 preventDefault()

  

  
      
            GeeksForGeeks  
         Try to check this box:
    
  
    Toggling a checkbox is the default action
      of clicking on a checkbox. The preventDefault() 
      method prevents this from happening.
  
    
        document.getElementById("myCheckbox")
            .addEventListener("click", function(event) {
                event.preventDefault()
            });
    
  

  

输出：

preventDefault() 停止切换复选框。

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

  

    
        Return false
    
    
        function validateForm() {
            var x = document.forms["myForm"]["fname"].value;
            if (x == "") {
                alert("Name must be filled out");
                return false;
            }
        }
    

  

  
      
            GeeksForGeeks  
        

  

    
        Return false
    
    

  

  
      
            GeeksForGeeks  
       
  
     PreventDefault( ) 
  
    
        Click here to visit geeksforgeeks.com
    
    
        $('a').click(function(event) {
            alert('Link Clicked');
            $('a').text('Click event prevented using return FALSE');
            $('a').contents().unwrap();
            return false;
        });
        $('div').click(function(event) {
            alert('Div clicked');
        });
    
    
    

  

  
    Form must be filled
    otherwise return false stop event
    
        Name:
        
        
    
  

  

输出：

• 
• 点击提交后不提交值返回 false 停止事件
  

示例 5：返回 false

  

    
        Return false
    
    

  

  
      
            GeeksForGeeks  
       
  
     PreventDefault( ) 
  
    
        Click here to visit geeksforgeeks.com
    
    
        $('a').click(function(event) {
            alert('Link Clicked');
            $('a').text('Click event prevented using return FALSE');
            $('a').contents().unwrap();
            return false;
        });
        $('div').click(function(event) {
            alert('Div clicked');
        });
    
    
    

  

输出：

• 在点击链接之前
  
• 点击链接后
  
• Return false 阻止事件通过 DOM 传播。