jQuery 事件 preventDefault() 方法

jQuery 的事件 preventDefault() 方法用于阻止（或停止）元素的默认行为被执行。当您想阻止浏览器执行其默认行为时，可以使用此方法，例如，当点击提交按钮时阻止表单提交，或者当点击链接时阻止跳转到链接的 URL。

您可以使用另一个名为 isDefaultPrevented() 的方法来了解此方法是否曾经被调用（在该事件对象上）。

语法

以下是 jQuery 事件 preventDefault() 方法的语法：

event.preventDefault()

参数

此方法不接受任何参数。

返回值

此方法没有任何返回值。

示例 1

以下是 jQuery 事件 preventDefault() 方法的基本示例：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <p>Click on the following link to redirect to another page: </p>
    <a href="https://tutorialspoint.com/index.htm">TutorialsPoint</a>
    <span></span>
    <script>
        $('a').click(function(event){
            event.preventDefault();
            alert("Default behaviour is disabled");
            $('span').text("The redirection will not occur because it has been prevented")
            $('span').css("color", "red");
        });
    </script>
</body>
</html>

输出

以上程序显示一个链接。当用户点击链接时，浏览器屏幕上将出现一个弹出警报，表明不允许重定向到另一个页面。

示例 2

以下是 jQuery 事件 preventDefault() 方法的另一个示例。我们使用此方法来阻止用户提交表单时表单的提交。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        form, input, button {
            display: block;
        }
        form input, button {
            padding: 10px;
            margin: 10px 0px;
        }
    </style>
</head>
<body>
    <form>
        Username: <input type="text" placeholder="Username" name="username">
        Password: <input type="password" placeholder="Password">
        <button type="submit">Login</button>
    </form>
    <script>
        $('form').submit(function(event) {
            event.preventDefault();
            alert("Form can't be submitted");
        });
    </script>
</body>
</html>

输出

执行上述程序后，将创建一个包含两个输入字段和一个按钮的表单，当用户尝试提交表单时，浏览器屏幕上将出现一个弹出警报，表明无法提交表单。

jquery_ref_events.htm

打印页面