---
# System prepended metadata

title: 5. 停止冒泡事件 - .stopPropagation()
tags: [JavaScript - event 事件]

---

# 5. 停止冒泡事件 - .stopPropagation()

- 承上一篇的 冒泡事件、事件捕捉，這次要講解的是一個可以停止冒泡事件產生的函式：`.stopPropagation();`


```
var elbox = document.querySelector('.box');


elbox.addEventListener('click', function (e) {
    e.stopPropagation();
    alert('box');
    console.log('box');
}, false)




var elbody = document.querySelector('.body');

elbody.addEventListener('click', function (e) {
    alert('body');
    console.log('body');
}, false)
```

- 在目標 box，由於事件後面的 function()寫入參數e

  故撰寫：
  
```
e.stopPropagation();
```  

- 後續再點 box 試試看，會發現 body 不會跳出來，這就是終止冒泡事件的語法

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