如果单击子节点，则不会触发JavaScript单击事件

Question

我正在开发一个我无法使用jQuery的项目，我遇到了点击事件的问题。

我有一个图标和一些文字的链接，我想创建一个事件，当我点击链接时，它会添加一个“选定”类。 问题是，当我单击子节点时，会将类添加到它而不是链接。

以下是一个例子：

window.onload = function() {
  var actions = document.querySelectorAll(".action");
  
  actionClickHandler = function(e) {
    e.target.classList.add("selected");
  };
  
  actions.forEach(function(action) {
    action.addEventListener("click", actionClickHandler);
  });
}

.action {
  display:inline-block;
  padding:10px 15px;
  background-color:#eee;
  border:1px solid #ddd;
  border-radius:8;
  color:#666;
  text-decoration:none;
}

.action:hover {
  box-shadow:0px 2px 5px rgba(0,0,0,0.3);
  border-color:#ccc;
}

.selected {
  background-color:#fff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<a href="#" class="action">
  <i class="icon fa fa-comment"></i>
  Comment
</a>

<a href="#" class="action">
  <i class="icon fa fa-heart"></i>
  Like
</a>

我想要的是，当我点击链接元素（“。action”）的任何地方时，.action会获得“选中”类而不是孩子。

我怎样才能做到这一点？

Answer 1

使用event.currentTarget代替event.target。

event.currentTarget返回事件linstener附加到的DOM元素，而不是event.target返回最内层元素，即捕获事件的元素。

＆＃13;

＆＃13;

window.onload = function() {
  var actions = document.querySelectorAll(".action");
  
  actionClickHandler = function(e) {
    e.currentTarget.classList.add("selected");
  };
  
  actions.forEach(function(action) {
    action.addEventListener("click", actionClickHandler);
  });
}

＆＃13;

.action {
  display:inline-block;
  padding:10px 15px;
  background-color:#eee;
  border:1px solid #ddd;
  border-radius:8;
  color:#666;
  text-decoration:none;
}

.action:hover {
  box-shadow:0px 2px 5px rgba(0,0,0,0.3);
  border-color:#ccc;
}

.selected {
  background-color:#fff;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<a href="#" class="action">
  <i class="icon fa fa-comment"></i>
  Comment
</a>

<a href="#" class="action">
  <i class="icon fa fa-heart"></i>
  Like
</a>

＆＃13;

＆＃13;

＆＃13;