如何讓點擊事件偵聽器不那麼具體？

Question

我有幾個嵌套的div，像這樣：

<div class="person" onClick="revealBio()"> 
    <div class="name">...some name</div> 
    <div class="role">...some role</div> 
    <div class="bio">...some bio</div>  
</div> 

在我的CSS，我有生物隱藏的（就像一個手風琴）。當該人點擊任何成員的信息時，我想展開以展示生物（通過更改CSS）。但是，我點擊的目標太具體。我想讓它回到被點擊的人卡（「人」div），但是如果這些卡被特別點擊，它也會給我返回名字和角色。

下面是我使用的香草的javascript：

function revealBio(){ 
    document.addEventListener('click', function(e) { 
    var revealThisBio = e.target; 
    revealThisBio.classList.toggle('reveal-bio') 
    }) 
} 

我想它返回給我：

<div class="person" onClick="revealBio()"> 
    <div class="name">...some name</div> 
    <div class="role">...some role</div> 
    <div class="bio">...some bio</div>  
</div> 

，這樣我可以切換類到人類揭示生物信息。有沒有辦法讓我的目標不那麼具體？

謝謝！

Answer 1

爲了解決你如何選擇，你點擊了.person問題，不要使用e.target，改用e.currentTarget，或this。

更重要的是，不要在每次點擊.person時綁定其他點擊處理程序。 revealBio已經是一個事件處理程序，所以只進行必要的修改有：

function revealBio() { 
    this.classList.toggle('reveal-bio'); 
} 

你至少嘗試使用addEventListener，你應該，這樣反而增加onclick="...garbage..."，從JS綁定你的點擊處理程序：

var people, 
    person, 
    i; 

function revealBio() { 
    this.classList.toggle('reveal-bio'); 
} 

people = document.querySelectorAll('.person'); 
for (i = 0; i < people.length; i++) { 
    person = people[i]; 
    person.addEventListener('click', revealBio); 
}