jQuery删除默认事件|极客教程

jQuery删除默认事件

在网页开发过程中，经常会遇到需要取消元素的默认事件行为的情况。例如，点击一个链接时默认会跳转到其他页面，我们希望通过使用jQuery来阻止这一默认行为。本文将详细介绍如何使用jQuery来删除默认事件。

什么是默认事件

默认事件是指浏览器对特定元素或操作所执行的预设行为。例如，点击链接时浏览器会默认触发跳转到链接地址；提交表单时会默认刷新页面等。在一些情况下，我们希望自定义元素的行为，这时就需要取消或删除默认事件。

jQuery删除默认事件的方法

1. `event.preventDefault()`

在jQuery中，我们可以通过使用event.preventDefault()方法来阻止默认事件的触发。当事件处理函数中调用event.preventDefault()方法时，浏览器会停止执行默认事件。

以下是一个简单的示例，当点击链接时禁止跳转：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cancel Default Event</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
 $(document).ready(function(){$ ("a").click(function(event){
    event.preventDefault();
  });
});
</script>
</head>
<body>

<a href="https://www.example.com">Click me</a>

</body>
</html>

在上面的示例中，当点击链接时不会跳转到https://www.example.com，而是停止了默认事件。这是因为在点击链接时，触发了click事件绑定的函数，其中调用了event.preventDefault()方法。

2. `return false`

除了使用event.preventDefault()方法外，我们还可以在事件处理函数中返回false来阻止默认事件的触发。返回false会同时阻止默认事件和冒泡事件。

以下是一个示例，当提交表单时阻止默认提交行为：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cancel Default Submit</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
 $(document).ready(function(){$ ("form").submit(function(){
    // do something
    return false;
  });
});
</script>
</head>
<body>

<form>
  <input type="text" name="username" placeholder="Username">
  <button type="submit">Submit</button>
</form>

</body>
</html>

在上面的示例中，当点击提交按钮时，表单不会被提交，因为在提交事件处理函数中返回了false。