---
# System prepended metadata
title: e.preventDefault vs e.stopPropagation vs return false
tags: [JavaScript]
---
# e.preventDefault vs e.stopPropagation vs return false
## 範例
```htmlmixed
aaaaaaaaaaaaa
bbbbbbbbbbbbb
ccccccccccccccc
預設
```
### 原始狀態
點選後會觸發自己本身及所有父元素，順序為自己本身至父元素
#### 測試程式
```htmlmixed
```
##### 點選 a
console: a
預設 >> a
##### 點選 b
console: b >> a
預設 >> a
##### 點選 c
console: c >> b >> a
預設 >> a
## e.preventDefault
測試結果，簡單來說 e.preventDefault是阻止瀏覽器的默認行為，其實與父、子元素無關只與自己本相關，例如:超連結若加上e.preventDefault那點選時就不會觸發等等
### 點選後立即觸發 event.preventDefault()
點選後會觸發自己本身及所有父元素，順序為自己本身至父元素，測試結果同原始狀態，若該狀態如超連結。
#### 測試程式
```htmlmixed
```
##### event.preventDefault()，放置在 a 點選 a
console: a
預設 >> a
##### event.preventDefault()，放置在 a 點選 b
console: b >> a
預設 >> a
##### event.preventDefault()，放置在 a 點選 c
console: c >> b >> a
預設 >> a
##### event.preventDefault()，放置在 b 點選 a
console: a
預設 >> a
##### event.preventDefault()，放置在 b 點選 b
console: b >> a
預設 >> a
##### event.preventDefault()，放置在 b 點選 c
console: c >> b >> a
預設 >> a
##### event.preventDefault()，放置在 c 點選 a
console: a
預設 >> a
##### event.preventDefault()，放置在 c 點選 b
console: b >> a
預設 >> a
##### event.preventDefault()，放置在 c 點選 c
console: c >> b >> a
預設 >> a
## e.stopPropagation
簡單說加到哪一層那他的父層就不會再被觸發了，目前看起來e.stopPropagation放置順序並沒有影響。
#### 測試程式
```htmlmixed