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

顧名思義，preventDefault() 方法可以防止所選元素的默認動作發生。例如，此方法可以阻止提交按鈕提交表單，也可以阻止錨點跟隨 URL。此方法不返回值。

用法

event.preventDefault()

preventDefault() 方法不接受任何參數。上述語法中提到的事件是必須指定的。

讓我們通過一些插圖來理解該方法。

示例 1

這是使用 preventDefault() 方法的一個簡單示例。在這個例子中，我們使用 event.preventDefault() 方法來防止錨點跟隨 URL。當我們嘗試點擊給定的 URL 時，鏈接將不起作用

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("a").click(function(e){
    e.preventDefault();
  });
});
</script>
</head>
<body>

<h4> It is an example of using the event.preventDefault() method. </h4>
<p> Try to click the below link. The link will not follow the URL because the method will prevent the link to follow the URL. </p>

<a href = "https://www.javatpoint.com/"> javatpoint.com </a>

</body>
</html>

輸出

執行上述代碼後，輸出將是 -

例2

這是使用 event.preventDefault() 方法的另一個簡單示例。在這個例子中，我們使用方法來阻止提交按鈕提交 HTML 表單。這裏有一個 HTML 表單，其中包含一些文本字段和按鈕。有一個提交按鈕，用於提交表單的數據。但是當我們嘗試點擊提交按鈕時，該按鈕將不起作用。

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#s1").click(function(e){
    e.preventDefault();
  });
});
</script>
</head>
<body>

<h4> It is an example of using the event.preventDefault() method. </h4>
	<form id = "myForm" action = "#" style = "font-size:20px;background:lightblue;" >
	<p> First Name:<input type = "text" id = "fname" /> </p>
	<p> Last Name:<input type = "text" id = "lname" /> </p>
	<p> E-mail Id:Â  <input type = "email"/> </p>
	<input type = "submit" id = "s1">
	<button type = "reset"> Reset </button>
	</form>
<p> Try to click the submit button. The button will not work because the method will prevent its default behavior. </p>

</body>
</html>

輸出

執行上述代碼後，輸出將是 -

相關用法

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