Got a problem with JS events.

<button class="TabsItem active">
  <img src="images/type-icons/120.PNG" alt="">
</button>

And use addEventListener to .TabItem but when I clicked on <img /> happens nothing. Can't figure out how to fix it so that everything that can be appeared in button will react on events.

Didn't find the answer by searching and googling. Thanks.

UPD: Here is js part, that rely on arrays of objects:

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

Got a problem with JS events.

<button class="TabsItem active">
  <img src="images/type-icons/120.PNG" alt="">
</button>

And use addEventListener to .TabItem but when I clicked on <img /> happens nothing. Can't figure out how to fix it so that everything that can be appeared in button will react on events.

Didn't find the answer by searching and googling. Thanks.

UPD: Here is js part, that rely on arrays of objects:

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

• javascript
• events
• dom

• Is your button dynamically-generated? If so, you'll need event delegation. Also, can you please share the existing JavaScript code you have in a minimal, complete, and verifiable example? :) – Obsidian Age Commented Aug 31, 2017 at 23:19
• Post your js code please – kip Commented Aug 31, 2017 at 23:20
• Currently everything is static. – almazmusic Commented Aug 31, 2017 at 23:20
• Can you update your question and include the relevant javascript please. When targeting a class it can return a list of elements (NodeList object) so depending on your selector you could use a few methods to add an event listener. – NewToJS Commented Aug 31, 2017 at 23:21
• Well, js is kinda messy :) Just because it rely on array of custom Tab objects, which have arrays of TabSwitches and TabContents :) – almazmusic Commented Aug 31, 2017 at 23:22

2 Answers 2

Do not set currentButton = e.target, because e.target will be equal to the Image element not the button. currentButton will be equal to tabSwitch.

Try this.

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>

Here is a very easy way to solve this problem with CSS.

If you make sure nothing within the button has pointer-events, clicks inside the button will always be for the button itself:

button * {pointer-events: none;}

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