如果單擊子節點，則不會觸發 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>