js 阻止默认事件|极客笔记

js 阻止默认事件

在前端开发中，经常会遇到需要阻止元素的默认事件行为的情况，比如点击链接时阻止页面跳转、表单提交时阻止页面刷新等。本文将详细介绍如何使用 JavaScript 来阻止默认事件，并提供一些示例代码进行演示。

为什么需要阻止默认事件

在 Web 开发中，浏览器为了确保页面的安全性和用户体验，会对一些元素的事件行为进行默认处理。比如，点击链接会跳转页面，提交表单会刷新页面。但在一些特定的场景下，我们需要阻止这些默认事件行为，以满足我们的功能需求。

阻止默认事件的方法

使用 preventDefault 方法

在 JavaScript 中，事件对象提供了一个 preventDefault 方法，可以用来阻止默认事件的触发。当事件被触发时，调用 preventDefault 方法即可阻止默认事件的发生。

const link = document.getElementById('link');

link.addEventListener('click', function(event) {
    event.preventDefault();
});

上面的示例代码中，当点击 id 为 link 的链接时，会阻止页面跳转的默认行为。

返回 false

除了使用 preventDefault 方法外，还可以通过在事件处理函数中返回 false 来阻止默认事件的发生。这种方式适用于一些简单的事件处理，但在某些场景下可能会产生副作用，因此建议优先使用 preventDefault 方法。

const form = document.getElementById('form');

form.addEventListener('submit', function(event) {
    // do something
    return false;
});

示例代码

阻止链接的跳转行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prevent Default Event Demo</title>
</head>
<body>
    <a href="#" id="link">Click Me</a>

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

        link.addEventListener('click', function(event) {
            event.preventDefault();
            console.log('Link Clicked');
        });
    </script>
</body>
</html>

点击链接时，页面不会跳转，并在控制台输出 Link Clicked。

阻止表单的提交行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prevent Default Event Demo</title>
</head>
<body>
    <form id="form">
        <input type="text" name="input">
        <button type="submit">Submit</button>
    </form>

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

        form.addEventListener('submit', function(event) {
            event.preventDefault();
            console.log('Form Submitted');
        });
    </script>
</body>
</html>

提交表单时，页面不会刷新，并在控制台输出 Form Submitted。