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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。