JavaScript 阻止默认行为

置顶 | 发表于 | 分类于 ， ， | 阅读次数：
本文字数： 1.4k | 阅读时长 ≈ 1 分钟

四、阻止默认行为（了解）

默认行为就是html标签的一些默认行为，比如点击a标签会跳转，比如点击了submit按钮表单会提交。这些都属于标签的默认行为。

有些时候，点击了a标签或者submit按钮后不希望执行标签的默认行为，这时候就需要阻止默认行为。

阻止默认行为：

标准浏览器：evt.preventDefault();

IE内核浏览器：window.event.returnValue = false;

03阻止默认行为.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>

<a href="02冒泡事件.html">冒泡事件</a>

<script>
    //获取a 标签
    document.getElementsByTagName('a')[0].onclick = function (evt) {
        //标准浏览器：evt.preventDefault();
        //IE内核浏览器：window.event.returnValue = false;
        /*if(window.event){
            window.event.returnValue = false;
        }else{
            evt.preventDefault();
        }*/
        //最简单的返回是直接 return false;
        return false;
    };
</script>

</body>

延伸：

  1. 在实际开发中，敏感操作一定要给提示。
1
<a href="02冒泡事件.html" onclick="return confirm('你确定要删除吗');">删除</a>
  1. 检测表单提交的两种方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>

<form name="myform" action="02冒泡事件.html" method="post">
    用户名：<input type="text" name="username" />
    <input type="submit" name="sub" value="提交" />
</form>

<script>
    //方式一：给submit按钮绑定onclick事件
    /*document.myform.sub.onclick = function () {
        alert('请填写用户名');
        return false; //阻止表单提交
    };*/

    //方式二：给表单form绑定onsubmit事件
    document.myform.onsubmit = function(){
        alert('请再次填写用户名');
        return false; //阻止表单提交
    };
</script>

</body>