阻止表单默认提交行为

2022-04-28 21:01:30 阅读：151 来源： 互联网

标签：function 示例 preventDefault 默认表单提交监听

当监听到表单的提交事件以后，可以调用事件对象的event.preventDefault()函数，来阻止表单的提交和页面的跳转，示例代码如下:

示例代码：

<!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>Document</title>
    <script src="/form表单/jquery-3.6.0.js"></script>
</head>

<body>
    <form action="/login" id="f1">
        <input type="text" name="user_name">
        <input type="password" name="password">
        <button type="submit">提交</button>
    </form>
</body>
<script>
    $(function () {
        // 第一种方式
        // $('#f1').submit(function (e) {
        //     alert("监听到了")
        //     // 阻止跳转
        //     e.preventDefault()
        // })

        // 第二种方式
        $('#f1').on('submit', function (e) {
            alert('监听到了2')
            e.preventDefault()
        })

    })
</script>

</html>

标签：function,示例,preventDefault,默认,表单,提交,监听
来源： https://www.cnblogs.com/lxr0606/p/16204489.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

阻止表单默认提交行为