CODEWITHSUNDEEP
javascripteventsdom
almazmusic
almazmusic

Reputation: 154

How to addEventListener to button and everything that can be putted in button?

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

Upvotes: 7

Views: 42669

Answers (2)

Reincha
Reincha

Reputation: 81

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/

Upvotes: 6

Daniel Tran
Daniel Tran

Reputation: 6171

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>

Upvotes: 6

Related Questions