JS阻止默认行为和Vue阻止默认行为

半截的诗--

已于 2023-04-27 14:08:42 修改

阅读量611

点赞数 1

分类专栏： Vue JS 文章标签： javascript vue.js 前端

于 2022-09-13 10:51:58 首次发布

本文链接：https://blog.csdn.net/m0_65992672/article/details/126828918

版权

JS 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Vue

2 篇文章 1 订阅

订阅专栏

本文详细介绍了如何使用JavaScript和Vue.js阻止表单提交和超链接点击的默认行为。通过`event.preventDefault()`方法，可以防止页面跳转，确保自定义操作的执行。示例代码展示了在HTML和Vue环境中阻止表单提交及链接点击的实践方法。

摘要由CSDN通过智能技术生成

JS阻止默认行为：

Vue阻止默认行为：

以下是JS阻止默认行为：

<!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>preventDefault 阻止控件的默认行为</title>
</head>
<body>
    <form action="https://www.baidu.com" method="get">
        <input type="submit" id="submitBtn">
    </form>
    <a href="https://www.baidu.com" id="anchor">超链接</a>
</body>
    <script>
        var a = document.querySelector("#anchor")
        var btn = document.querySelector("#submitBtn")
        a.onclick = function(){
            console.log("我点了一个超链接");
          
            event.preventDefault();
            
            // return false 也可以
        }

        btn.onclick = function(){
            console.log("我点了一个表单超链接");
          
            event.preventDefault();
            
            // return false 也可以
        }
</script>
</html>

以下是Vue阻止默认行为：

<!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="../vue库/vue.js"></script>
</head>
<body>
    <!-- 
        vue两种阻止网址跳转写法：
        @click.prevent="submitBut"
        event.preventDefault();
     -->
    <div id="app">
         <form action="https://blog.csdn.net/m0_65992672?spm=1000.2115.3001.5343" method="get">
             <input type="submit"  @click.prevent="submitBut">
        </form>
        <a href="https://blog.csdn.net/m0_65992672?spm=1000.2115.3001.5343" @click="clickAnchor">超链接</a>
    </div>
   
</body>
    <script>
        var app = new Vue({
            el:"#app",
            methods: {
                clickAnchor(event){
                   console.log("我点了一个链接");
                    event.preventDefault();
                },
                submitBut(){
                    console.log("我点了一个表单链接");
                }
            },
        })
    </script>
</html>