如何阻止submit事件

标题写的有点误差,简单描述下,还是用代码说话吧;

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="https://yio.me">
         <input type="submit" id="sub"> 
    </form>
</body>
</html>
<script>
    var b = document.getElementById('sub');
    b.addEventListener("click",function(){
        // 比如这里有一个判断,结果是false,不希望submit事件生效(默认提交事件);
        console.log(1)
        return false
    })
</script>

 

结果是条件里的 console.log(1)执行了,接下来不意外的执行form的submit事件,页面被提交到yio.me上;

我的目的就是让条件执行之后返回 return false 不让他继续走下去(跳转页面)

代码可以这样写

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="https://yio.me">
         <input type="submit" id="sub" onclick="return fun()"> 
    </form>
</body>
</html>
<script>
    function fun(){
        // 判断条件
        console.log(1);
        return false
    }
</script>

 

注意标红色的代码,这样就可以啦~~

当然你也可以使用button或者其他标签去提交,我这里说的是submit;

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注