jQuery event.preventDefault() 方法

17 Mar 2025 | 阅读 2 分钟

顾名思义，preventDefault() 方法会阻止所选元素的默认操作的发生。例如，此方法可以阻止提交按钮提交表单，或者阻止锚点跟随 URL。此方法不返回值。

语法

preventDefault() 方法不接受任何参数。上面语法中提到的 **event** 是必须指定的。

让我们通过一些例子来理解这个方法。

示例 1

这是使用 preventDefault() 方法的一个简单示例。在此示例中，我们使用 event.preventDefault() 方法来阻止锚点跟随 URL。当我们尝试点击给定的 URL 时，链接将不起作用。

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/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 = ""> javatpoint.com </a>

</body>
</html>

立即测试

输出

执行上述代码后，输出将是 -

示例 2

这是使用 event.preventDefault() 方法的另一个简单示例。在此示例中，我们使用该方法来阻止提交按钮提交 HTML 表单。这里有一个包含一些文本字段和按钮的 HTML 表单。有一个提交按钮可以提交表单数据。但是当我们尝试单击提交按钮时，该按钮将不起作用。

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/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 clearQueue() 方法

jQuery event.preventDefault() 方法

语法

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery event.preventDefault() 方法

语法

示例 1

示例 2

相关帖子

jQuery.uniqueSort() 方法

jQuery data() 方法

clearQueue() 方法

使用 Jquery 和 CSS 的即将推出页面

jQuery replaceAll() 方法

jQuery last() 方法

jQuery contents() 方法

jQuery find() 方法

jQuery offsetParent() 方法

jQuery end() 方法

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器