JQuery 阻止默认行为

最新推荐文章于 2021-08-05 15:30:31 发布

原创最新推荐文章于 2021-08-05 15:30:31 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

JQuery案例总结专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用 JavaScript 的 event.preventDefault() 方法来阻止 HTML 元素的默认行为，例如 a 标签的点击跳转和 submit 按钮的表单提交等。通过实际案例展示了阻止默认行为的具体实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题及效果：

什么是默认行为？

如：a 标签的点击跳转、submit按钮的点击提交、选中文本的拖拽搜索等等……

有时我只是需要a标签的样式并不希望有点击跳转的效果；

用户填写完表单时，表单内容也会在前台JS中进行验证，内容不合法，数据也不能提交；

因此，在某些时候，我们需要阻止标签元素的默认行为；

案例代码：
<body>
    <a href="http://www.qq.com" id="tx">腾讯链接</a> <br>
    <hr>
    <form action="05-8-2.php" method="get">
        用户名：<input type="text" name="names" value="" id="names"><br>
        <input type="submit" value="提交" id="sub">
    </form>
</body>
<script>
    $('#tx').click(function(){
        alert(1);
    })
    $('#sub').click(function(){
        if($('#names').val()==''){
            alert('用户名不能为空');
        }
    })
</script>

修改上述代码的JS部分，阻止元素默认行为
<script>
    $('#tx').click(function(ev){
        alert(1);
        ev.preventDefault();
    })
    $('#sub').click(function(ev){
        if($('#names').val()==''){
            alert('用户名不能为空');
            ev.preventDefault();
        }
    })
</script>
知识点：
event.preventDefault()
阻止默认事件行为的触发。