JQuery event.preventDefault()用法及代碼示例

jQuery中的preventDefault()方法用於停止發生所選元素的默認操作。它還用於檢查是否為所選元素調用了preventDefault()方法。

用法:

event.preventDefault()

參數：它不接受任何參數。

返回值：它返回具有應用更改的所選元素。

示例1:本示例使用preventDefault()方法停止打開新鏈接。

<!DOCTYPE html> 
<html> 
   
<head> 
    <title> 
        jQuery event.preventDefault() Method 
    </title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
      
    <style> 
        body { 
            width: 50%; 
            height: 40%; 
            padding: 20px; 
            border: 2px solid green; 
            font-size: 20px; 
        } 
    </style> 
      
    <!-- Script to use event.preventDefault() method -->
    <script> 
        $(document).ready(function() { 
            $("a").click(function(event) { 
                event.preventDefault(); 
                alert("The required page will not be open"); 
            }); 
        }); 
    </script> 
</head> 
   
<body> 
    <a href="https://www.geeksforgeeks.org"> 
        Welcome to GeeksforGeeks! 
    </a> 
</body> 
   
</html>

輸出：
之前單擊鏈接：

單擊鏈接後：

示例2:本示例使用event.preventDefault()方法停止提交表單。

<!DOCTYPE html> 
<html> 
   
<head> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
      
    <style> 
        body { 
            width: 50%; 
            height: 40%; 
            padding: 20px; 
            border: 2px solid green; 
            font-size: 20px; 
        } 
        input { 
            width: 220px; 
            height: 30px; 
            border-radius: 10px; 
        } 
    </style> 
      
    <!-- Script to use event.preventDefault() method -->
    <script> 
        $(document).ready(function() { 
            $("button").click(function(event) { 
                event.preventDefault(); 
                alert("This form will not submit"); 
            }); 
        }); 
    </script> 
</head> 
   
<body> 
   
    <input type="text" placeholder="enter name" /> 
      
    <br><br> 
      
    <button>Submit </button> 
</body> 
   
</html>

輸出：
之前單擊按鈕：

單擊按鈕後：

相關用法

注：本文由純淨天空篩選整理自Sruti Rai大神的英文原創作品 jQuery | event.preventDefault() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。