Question

我不明白为什么当我在元素上添加click事件监听器时，它的子元素也会触发它。

我希望即使孩子被点击也会触发父母，这应该是我认为的正常行为。

下面是代码：

＆＃13;

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.
  
}

＆＃13;

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

＆＃13;

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/

Javascript：阻止在子元素上触发点击事件

1 个答案: