如果单击子节点，则不会触发 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返回最内部的元素，即捕获事件的元素。

 window.onload = function() { var actions = document.querySelectorAll(".action"); actionClickHandler = function(e) { e.currentTarget.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>