---
# System prepended metadata

title: 6. preventDefault 用於停止元素預設的功能
tags: [JavaScript - event 事件]

---

# 6. preventDefault 用於停止元素預設的功能


- 怎麼叫做取消預設功能？以 a 連結為例：

1. 以下列網址為例，正常點擊了之後會跳出一個新視窗並跳轉到中華職棒的官方網站

2. 可能會有人覺得奇怪？這又有什麼問題？為何我們需要去取消預設的默認行為呢？

```
<a href="https://www.cpbl.com.tw/" target="_blank" class="link">sumbit</a>
```
- 秘密就藏在接下來的程式碼：

  我們在下面寫一個 class: .style
```
    <a href="https://www.cpbl.com.tw/" target="_blank" class="link">sumbit</a>
    <div class="style"></div>
```

- CSS 另外寫一個 .box

```
.box {
    margin-top: 50px;
    background: green;
    width: 250px;
    height: 250px;
}
```

- 兩者看起來與 a 連結不相關的代碼究竟埋下了什麼伏筆呢？

---

### JavaScript 的部分：

```
var el = document.querySelector('.link');

el.addEventListener('click', function (e) {
    e.preventDefault();
    var changeTag = document.querySelector('.style');
    changeTag.setAttribute('class', 'box');
}, false)
```

### 先指定 link:

```
var el = document.querySelector('.link');
```

### 針對 link 設定監聽 'click' 事件，且針對參數使用取消默認行為

```
el.addEventListener('click', function (e) {
    // 取消元素的連結默認行為
    e.preventDefault();
    // 當點下 link 時 .style 會設定 class 到 .box
    var changeTag = document.querySelector('.style');
    changeTag.setAttribute('class', 'box');
}, false)
```

### 這個範例就是由取消連結，但是點擊連結會產生一個方塊元素的案例


![](https://i.imgur.com/DmWuKCF.png)


###### tags: `JavaScript - event 事件`