# 默认行为及阻止
浏览器以及`HTML`元素提供了一些默认行为，也可以称作默认事件。

## 默认行为

### a标签点击跳转
`<a>`标签在`href`存在的情况下会点击自动跳转链接或者定位锚点，通过对`<a>`的监听事件阻止默认行为后，点击链接不会跳转。

```html
<a href="https://blog.touchczy.top" id="t1">点击跳转链接</a>
<script type="text/javascript">
    document.getElementById("t1").addEventListener("click", (e) => {
        e.preventDefault();
    })
</script>
```

### 鼠标右击显示菜单
在浏览器页面中鼠标右击会显示菜单，通过对`document`的监听事件阻止默认行为后，右击页面不会弹出菜单，当然也可以通过监听并组织默认行为制作自定义右键菜单。

```html
<script type="text/javascript">
    document.addEventListener("contextmenu", (e) => {
        e.preventDefault();
    })
</script>
```

### input输入
在`<input>`或者`<textarea>`获得焦点时敲击键盘会自动输入，阻止默认行为后，敲击键盘将不会输入，可以在这个事件监听下作输入数据过滤，例如只允许输入数字。

```html
<input id="t3" />
<script type="text/javascript">
    document.getElementById("t3").addEventListener("keydown", (e) => {
        e.preventDefault();
    })
</script>
```

### 复选框选中
复选框的默认行为下是点击选中获取取消选中，阻止默认行为后，点击将不会改变目前状态。

```html
<input id="t4" type="checkbox" />
<script type="text/javascript">
    document.getElementById("t4").addEventListener("click", (e) => {
        e.preventDefault();
    })
</script>
```

### 表单提交
表单中若是存在`type`为`submit`的`<input>`或者是`<buttton>`都会触发表单的提交，阻止默认行为后表单不会自动提交。

```html
<form action="./" id="t5">
    <input type="submit" name="btn" />
</form>
<script type="text/javascript">
    document.getElementById("t5").addEventListener("submit", (e) => {
        e.preventDefault();
    })
</script>
```

## 阻止默认行为
* `W3C`推荐的阻止默认行为的方式是`event.preventDefault()`，此方法只会阻止默认行为而不会阻止事件的传播。
* `IE8`及之前的浏览器阻止默认行为需要使用`window.event.returnValue = false`。
* 直接在事件处理函数中`return false`也能阻止默认行为，只在`DOM0`级模型中有效。此外，在`jQuery`中使用`return false`会同时阻止默认行为与事件传播。

## 示例代码

```html
<!DOCTYPE html>
<html>
<head>
    <title>默认行为及阻止</title>
</head>
<body>
    <a href="https://blog.touchczy.top" id="t1">点击跳转链接</a>
    <input id="t3" />
    <input id="t4" type="checkbox" />

    <form action="/" id="t5">
        <input type="submit" name="btn" />
    </form>

    <a href="https://blog.touchczy.top" id="t6">点击跳转链接</a>

</body>
<script type="text/javascript">
    document.getElementById("t1").addEventListener("click", (e) => {
        e.preventDefault();
    })

    document.addEventListener("contextmenu", (e) => {
        e.preventDefault();
    })

    document.getElementById("t3").addEventListener("keydown", (e) => {
        e.preventDefault();
    })

    document.getElementById("t4").addEventListener("click", (e) => {
        e.preventDefault();
    })

    document.getElementById("t5").addEventListener("click", (e) => {
        e.preventDefault();
    })

    document.getElementById("t6").onclick = (e) => {
        return false;
    }
</script>
</html>
```


## 每日一题

```
https://github.com/WindrunnerMax/EveryDay
```

## 参考

```
https://segmentfault.com/a/1190000007681900
http://www.imooc.com/article/259535?block_id=tuijian_wz
https://developer.mozilla.org/zh-CN/docs/Web/API/Event/preventDefault
```