單事件偵聽器的多個子元素

考慮下面的HTML代碼：單事件偵聽器的多個子元素

<section> 
    <div id="left-box"></div> 
    <div id="middle-box"></div> 
    <div id="right-box"></div> 
</section>

我想改變的每一個上面箱子被點擊一次<section>顏色。我不提交CSS。是否有可能使用3個事件偵聽器來處理3個盒子上的點擊事件而僅使用一個？我聽說過片段。任何想法？

來源

2016-06-09 Unknown developer

綁定事件監聽器'section'偵聽的點擊次數/事件。 –

那麼如何判斷三個框中的哪一個被點擊？ –

只需檢查傳遞給處理程序的事件對象。 – Vitalii

您可以在其中包含三個<div>元素<section>使用一個單一的監聽器，然後檢查event.target，看看是否被點擊其中的一個。因此，只有當您點擊三個框中的一個，而不是父母<section>元素時，您的代碼纔會運行。

下面是一個例子。爲了清楚起見，我添加了ID，類和一些CSS。

var section = document.getElementById("container"); 
 

 
container.addEventListener("click", function(e) { 
 
    if (e.target.className == "box") { 
 
     // You clicked on a box 
 
     container.style.backgroundColor = e.target.style.backgroundColor; 
 
    } 
 
}); 
 

 
document.getElementById("left-box").style.backgroundColor = "red"; 
 
document.getElementById("middle-box").style.backgroundColor = "green"; 
 
document.getElementById("right-box").style.backgroundColor = "blue";

#container { 
 
    background-color: yellow; 
 
    display: inline-block; 
 
    padding: 10px; 
 
} 
 

 
#container > div { 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 5px; 
 
    border: 1px solid yellow; 
 
    display: inline-block; 
 
}

<section id="container"> 
 
    <div class="box" id="left-box"></div> 
 
    <div class="box" id="middle-box"></div> 
 
    <div class="box" id="right-box"></div> 
 
</section>

來源

2016-06-09 19:22:04

如果您將事件偵聽器附加到section，則可以找到單擊的元素。

var section = document.getElementsByTagName('section')[0]; 
section.addEventListener('click', function(e) { 
    console.log(e.toElement); 
});

來源

2016-06-09 19:19:44 skalpin

單事件偵聽器的多個子元素

回答

相關問題