小编alm*_*sic的帖子

如何向按钮添加事件监听器以及可以放入按钮的所有内容?

JS 事件有问题。

<button class="TabsItem active">
  <img src="images/type-icons/120.PNG" alt="">
</button>
Run Code Online (Sandbox Code Playgroud)

并用过addEventListener.TabItem但当我点击时<img />什么也没有发生。无法弄清楚如何修复它,以便按钮中出现的所有内容都会对事件做出反应。

通过搜索和谷歌搜索没有找到答案。谢谢。

UPD:这是 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');
                }
            });
        }); …
Run Code Online (Sandbox Code Playgroud)

javascript events dom

5
推荐指数
2
解决办法
4万
查看次数

标签 统计

dom ×1

events ×1

javascript ×1