如果點擊子節點，JavaScript點擊事件不會被觸發

我正在開發一個項目，我無法使用jQuery，而且我遇到了點擊事件的問題。如果點擊子節點，JavaScript點擊事件不會被觸發

我有一個圖標和一些文本的鏈接，我想創建一個事件，當我點擊鏈接時，它會添加一個「選定」類。問題是，當我點擊一個子節點時，該類被添加到它而不是鏈接。

下面是一個例子：

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獲取類‘選擇’和不是孩子。

我該如何做到這一點？

來源

2017-05-25 Mario Andrade

使用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>

來源

2017-05-25 12:06:31 Cristy

如果點擊子節點，JavaScript點擊事件不會被觸發

回答

相關問題