stopPropagation - 中止事件傳播

Posted on In

用 stopPropagation 來「中止事件傳播」

html:

1
2
3
<body class="body">

    <div class="box"></div>

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// .box 的「click 事件」
var el = document.querySelector('.box');

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

// <body> 的「click 事件」
var elBody = document.querySelector('.body');

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

🎃 因為.addEventListener的第三個參數寫false，所以–> 會從「指定元素」往外層執行“監聽事件”

當我點擊.box時，除了觸發「.box的“click 事件”」，也會同時觸發「<body>的“click 事件”」

🍋 先跳出alert('box');

🍋 再跳出alert('body');

‼️ 但是，現在我希望只觸發「.box的“click 事件”」就好，不要再繼續往外層去觸發「<body>的“click 事件”」

只執行“指定元素”的事件

在.addEventListener的第三個參數是寫「false」的情況下：

🎃 用e.stopPropagation();來「中止事件傳播」–> 當元素「互相重疊」時，只執行“指定元素”的事件，不會再繼續往外層執行“監聽事件”

作法如下：

在.box 的「click 事件」

🎃 在function小括號裡面，加上「e」

🍋 加上「e」原因為：會需要「執行 event 當下」相關的資料，e會是一個「物件」

📖 為什麼需要e來「撈出“事件的詳細資訊”」？

原因為：把「.box click 事件」的詳細資訊撈出來後，用e.stopPropagation();來告訴瀏覽器–> 只需要執行.box的事件即可，不用再繼續往外層執行“監聽事件”

🍋 Propagation 是「傳播」的意思

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// .box 的「click 事件」
var el = document.querySelector('.box');

el.addEventListener('click',function(e){
    // 中止「冒泡事件」
    e.stopPropagation();
    alert('box');
    console.log('box');
},false);


// <body> 的「click 事件」
var elBody = document.querySelector('.body');

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

加上e.stopPropagation();之後，

當我點擊.box

🍋 就只會跳出alert('box');

🍋 不會再跳出alert('body');了

只執行“最外層元素”的事件

在.addEventListener的第三個參數是寫「true」的情況下：

🎃 用e.stopPropagation();來「中止事件傳播」–> 當元素「互相重疊」時，只執行“最外層元素”的事件，不會再繼續往內層執行“監聽事件”

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// .box 的「click 事件」
var el = document.querySelector('.box');

el.addEventListener('click',function(e){
    // 不會再繼續往內層執行“監聽事件”
    e.stopPropagation();
    alert('box');
    console.log('box');
},true);


// <body> 的「click 事件」
var elBody = document.querySelector('.body');

elBody.addEventListener('click', function () {
    alert('body');
    console.log('body');
},true);