Javascript：子要素にクリックイベントが発生しないようにします。

Question

要素にクリックイベントリスナーを追加すると、その子もそれをトリガーする理由がわかりません。

子供がクリックされても親がトリガーされることを願っています。これは私が思う通常の動作でなければなりません。

相続コード：jobsListコレクションがターゲット要素が含まれている場合は、例えば、チェックのために、その後、クリックされたかどうか確認するためにe.targetを使用することができます

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

。そうであれば、.job要素の1つがターゲットであり、そうでない場合、ターゲットは子要素です。あなたの答えのための

// 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/