如果点击子节点，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点击事件不会被触发

回答

相关问题