如何为按钮以及所有可以放在按钮中的元素添加addEventListener？

Question

如何为按钮以及所有可以放在按钮中的元素添加addEventListener？

5

有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');
                }
            });
        });
    });

- almazmusic

你的按钮是动态生成的吗？如果是，你需要事件委托。另外，请分享一下你现有的 JavaScript 代码，最好是一个“最小、完整和可验证的示例”（http://stackoverflow.com/help/mcve）：) - Obsidian Age

请发布您的 JavaScript 代码。 - kip

目前一切都是静态的。 - almazmusic

你能否更新你的问题并包含相关的JavaScript代码。当针对一个class进行操作时，它可以返回一个元素列表（NodeList对象），因此根据你的选择器，你可以使用几种方法来添加事件监听器。 - NewToJS

嗯，JS有点凌乱 :) 这是因为它依赖于自定义Tab对象的数组，这些对象又有TabSwitches和TabContents的数组 :) - almazmusic

@almazmusic 只包括相关部分即可。我相信所有其他功能都不是必要的，同时打开您的浏览器控制台并检查错误。在使用/调试JavaScript时，浏览器控制台是您最好的朋友。 - NewToJS

2个回答

5

以下是使用CSS解决此问题的非常简单的方法。

如果确保按钮内没有指针事件，那么在按钮内部点击将始终是为按钮本身服务：

button * {pointer-events: none;}

From: https://css-tricks.com/slightly-careful-sub-elements-clickable-things/

- Reincha

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Daniel Tran · Accepted Answer

不要将currentButton = e.target，因为e.target将等于Image元素而不是按钮。currentButton将等于tabSwitch。

试试这个。

var button = document.getElementById("button");
button.addEventListener("click", function(event){
   alert(event.target);
});

<button id="button">
   <img src="http://www.iconarchive.com/download/i38829/google/chrome/Google-Chrome-Chromium.ico" />
</button>

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();
                if (!tabSwitch.classList.contains('active')) {
                    currentTab.Switches.forEach(currentTabSwitchClear => { currentTabSwitchClear.classList.remove('active'); });
                    currentTab.Contents.forEach(currentTabContentClear => { currentTabContentClear.classList.remove('active'); });
                    tabSwitch.classList.add('active');
                    currentTab.Contents[Array.from(currentTab.Switches).indexOf(tabSwitch)].classList.add('active');
                }
            });
        });
    });

.TabsContentItem {
  display: none;
}

.TabsContentItem.active {
  display: block;
}

<div class="Tabs">
<button class="TabsItem active">
  <img src="https://static.licdn.com/sc/h/9wcfzhuisnwhyauwp7t9xixy7" />
 </button>
 <button class="TabsItem">
  <img src="https://www.askwoody.com/wp-content/themes/gear_askwoody/images/ico/home-icon.png" />
 </button>
 <div class="TabsContentItem active">
   Linkedin Tab
 </div>
  <div class="TabsContentItem">
   Home Tabs
 </div>
 </div>