帶有img的div單擊事件，單擊img時文本不觸發

Question

我在ES6 / vanilla JS中編寫了切換腳本。 預期的功能非常簡單，只需單擊切換div，它將active類添加到與切換div的data-toggle屬性匹配的另一個div中。 在我的切換div中，我需要同時包含文本和圖像。 當您單擊div中的文本時，它的效果很好，但是，當您單擊div中的圖像時，則不會觸發切換。 我需要做些具體的事情來將div中的所有孩子包括在內嗎？

出於某種原因，我什至無法通過此代碼段編輯器來使它工作，但它在我的項目中正在工作。

 const setActive = (toggles, panels, id) => { let activePanel = panels.filter(panel => panel.getAttribute('data-toggle') == id) let activeToggle = toggles.filter(toggle => toggle.getAttribute('data-toggle') == id) activePanel.forEach(panel => panel.classList.add('active')) activeToggle.forEach(toggle => toggle.classList.add('active')) } const removeActive = (nodes) => { nodes.forEach(node => node.classList.remove('active')) } const handler = (event) => { event.preventDefault() let id = event.target.getAttribute('data-toggle') let panels = Array(...document.querySelectorAll('.js-toggle-panel')) let toggles = Array(...document.querySelectorAll('.js-toggle')) removeActive(panels) removeActive(toggles) setActive(toggles, panels, id) } let toggles = Array(...document.querySelectorAll('.js-toggle')) toggles.forEach(toggle => toggle.addEventListener('click', handler)) 

 .toggle-panel { display: none; } .toggle-panel .active { display: block; } 

 <div class="js-toggle toggle" data-toggle="toggle-1"> <img src="https://via.placeholder.com/50"> First toggle </div> <div class="js-toggle toggle" data-toggle="toggle-2"> Second toggle </div> <div class="js-toggle-panel toggle-panel" data-toggle="toggle-1"> <h1>Toggle 1</h1> </div> <div class="js-toggle-panel toggle-panel" data-toggle="toggle-2"> <h1>Second toggle!</h1> </div> 

Answer 1

您應該在handler函數中使用event.currentTarget代替event.target ，以返回附加了事件偵聽器的節​​點。 event.target返回的是<img>節點，而不是<div>且具有data-toggle 。

Answer 2

我更改了兩項我認為可以解決您問題的方法：

1. 我將選擇器.toggle-panel .active為.toggle-panel.active ，即使沒有選擇，即使在JS正常工作的情況下，實際上也看不到。
2. 我將您的代碼從使用event.target移到event.currentTarget －前者始終指向clicked元素，而后者則指向放置偵聽器的元素。

請參見下面的代碼段。

 const setActive = (toggles, panels, id) => { let activePanel = panels.filter(panel => panel.getAttribute('data-toggle') == id) let activeToggle = toggles.filter(toggle => toggle.getAttribute('data-toggle') == id) activePanel.forEach(panel => panel.classList.add('active')) activeToggle.forEach(toggle => toggle.classList.add('active')) } const removeActive = (nodes) => { nodes.forEach(node => node.classList.remove('active')) } const handler = (event) => { event.preventDefault() let id = event.currentTarget.getAttribute('data-toggle') let panels = Array(...document.querySelectorAll('.js-toggle-panel')) let toggles = Array(...document.querySelectorAll('.js-toggle')) removeActive(panels) removeActive(toggles) setActive(toggles, panels, id) } let toggles = Array(...document.querySelectorAll('.js-toggle')) toggles.forEach(toggle => toggle.addEventListener('click', handler)) 

 .toggle-panel { display: none; } .toggle-panel.active { display: block; } 

 <div class="js-toggle toggle" data-toggle="toggle-1"> <img src="https://via.placeholder.com/50"> First toggle </div> <div class="js-toggle toggle" data-toggle="toggle-2"> Second toggle </div> <div class="js-toggle-panel toggle-panel" data-toggle="toggle-1"> <h1>Toggle 1</h1> </div> <div class="js-toggle-panel toggle-panel" data-toggle="toggle-2"> <h1>Second toggle!</h1> </div>