# 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)

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


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