JavaScript preventDefault作用|极客笔记

JavaScript preventDefault作用

在前端开发中，我们经常会遇到需要阻止默认行为的情况。比如在处理表单提交、点击链接跳转等场景下，我们希望能够自定义处理事件而不是让浏览器执行默认的动作。这时候，我们就可以使用preventDefault()方法来阻止默认行为。

preventDefault()方法的基本用法

preventDefault()是事件对象的一个方法，用于阻止事件的默认行为。在事件处理函数中，我们可以通过调用该方法来阻止浏览器执行事件的默认操作。

下面是一个简单的示例，演示如何使用preventDefault()方法阻止链接的默认跳转行为：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>preventDefault示例</title>
</head>
<body>

<a href="https://www.baidu.com" id="link">点击跳转</a>

<script>
  const link = document.getElementById('link');

  link.addEventListener('click', function(event) {
    event.preventDefault();
    console.log('链接被点击了，但是不会跳转');
  });
</script>

</body>
</html>

在上面的示例中，当我们点击链接时，虽然页面会输出’链接被点击了，但是不会跳转’，但是页面并不会跳转到百度。这是因为在事件处理函数中调用了preventDefault()方法，阻止了默认的跳转行为。

preventDefault()方法的应用场景

防止表单提交

在处理表单提交时，我们可能会希望在用户点击提交按钮后执行一些验证操作，如果验证失败就不提交表单。这时候我们可以利用preventDefault()方法来阻止表单的默认提交行为。

下面是一个简单的示例，演示如何使用preventDefault()方法阻止表单的默认提交行为：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>防止表单提交示例</title>
</head>
<body>

<form id="myForm">
  <input type="text" name="username" placeholder="请输入用户名">
  <input type="submit" value="提交">
</form>

<script>
  const form = document.getElementById('myForm');

  form.addEventListener('submit', function(event) {
    const username = form.username.value;
    if (username === '') {
      alert('用户名不能为空');
      event.preventDefault();
    }
  });
</script>

</body>
</html>

在上面的示例中，当用户点击提交按钮时，如果用户名为空，就会弹出提示框，并且阻止表单的默认提交行为。

防止链接跳转

有时候我们希望在用户点击链接时执行某些操作，而不是直接跳转到链接指定的页面。这时候我们可以使用preventDefault()方法来阻止链接的默认跳转行为。

下面是一个简单的示例，演示如何使用preventDefault()方法阻止链接的默认跳转行为：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>防止链接跳转示例</title>
</head>
<body>

<a href="https://www.baidu.com" id="link">点击跳转</a>

<script>
  const link = document.getElementById('link');

  link.addEventListener('click', function(event) {
    event.preventDefault();
    console.log('链接被点击了，但是不会跳转');
  });
</script>

</body>
</html>

在上面的示例中，当我们点击链接时，虽然页面会输出’链接被点击了，但是不会跳转’，但是页面并不会跳转到百度。