Javascript：防止點擊事件被觸發的兒童元素

Question

我不明白爲什麼當我在元素上添加一個點擊事件偵聽器時，它的子元素也會觸發它。

我想即使點擊了孩子也會觸發父母，這應該是我認爲的正常行爲。

繼承人的代碼：

var jobsList = document.querySelectorAll('.job_list .job'); 
 

 
for (var i = 0; i < jobsList.length; i++) { 
 
    jobsList[i].addEventListener('click', _onChangeJob, false); 
 
} 
 

 
function _onChangeJob(e){ 
 
    
 
    // When The children (.job_title, .job_date) is clicked, this function is called. I want only the parent to be clicked event if the children are clicked. 
 
    
 
}

<div class="job_list"> 
 
    <div class="job active" data-job="1"> 
 
\t <p class="job_title">Job</p> 
 
\t <p class="job_date">21.11.16</p> 
 
    </div> 
 
    <div class="job active" data-job="1"> 
 
\t <p class="job_title">Job</p> 
 
\t <p class="job_date">21.11.16</p> 
 
    </div> 
 

 

 
</div>

Answer 1

您可以使用e.target檢查已被點擊了什麼，然後例如檢查jobsList集合包含目標元素。如果確實如此，則其中一個.job元素是目標，否則目標是子元素。

// convert to a regular array to get indexOf method 
var jobsList = [].slice.call(document.querySelectorAll('.job_list .job')); 

for (var i = 0; i < jobsList.length; i++) { 
    jobsList[i].addEventListener('click', _onChangeJob, false); 
} 

function _onChangeJob(e){ 
    if(jobsList.indexOf(e.target) !== -1){ 
    console.log('clicked on .job') 
    } 
    else { 
    console.log('clicked on a child element') 
    } 
} 

https://jsfiddle.net/4r7hLua2/