有JS事件的问题。
<button class="TabsItem active">
<img src="images/type-icons/120.PNG" alt="">
</button>
请使用
addEventListener
来处理.TabItem
,但是当我点击<img />
时没有任何反应。无法想出如何修复,使按钮中可以出现的所有内容都对事件做出反应。通过搜索和谷歌搜索没有找到答案。 谢谢。
更新: 这里是依赖对象数组的js部分:
let buffer = document.querySelectorAll('.Tabs'),
Tabs = [];
buffer.forEach(el => {
Tabs.push({
List: el,
Switches: el.querySelectorAll('.TabsItem'),
Contents: el.querySelectorAll('.TabsContentItem'),
})
});
buffer = [];
Tabs.forEach(currentTab => {
currentTab.Switches.forEach(tabSwitch => {
tabSwitch.addEventListener('click', (e) => {
e.stopPropagation();
const currentButton = e.target;
if ((currentButton == tabSwitch) && (!currentButton.classList.contains('active'))) {
currentTab.Switches.forEach(currentTabSwitchClear => { currentTabSwitchClear.classList.remove('active'); });
currentTab.Contents.forEach(currentTabContentClear => { currentTabContentClear.classList.remove('active'); });
currentButton.classList.add('active');
currentTab.Contents[Array.from(currentTab.Switches).indexOf(currentButton)].classList.add('active');
}
});
});
});
class
进行操作时,它可以返回一个元素列表(NodeList对象),因此根据你的选择器,你可以使用几种方法来添加事件监听器。 - NewToJS