CODEWITHSUNDEEP
javascriptjqueryhtmlevent-bubbling
Austin Jones
Austin Jones

Reputation: 709

Child not triggering parent function

I have a menu and set an even listener to the document and if the a tag is clicked a function is executed, but for some reason when the elements inside the anchor tag are clicked the function is not triggered. Maybe I'm mistaken, but isn't default bubbling behavior for a parent function to execute when a child element is clicked?

document.addEventListener('click', function(e){
    if(e.target.tagName=="A"){
     alert('BUTTON CLICKED');
    }
  })
  
body {
    padding:0;
    margin:0;
    background-color: #252526;
}
* {
    box-sizing: content-box;
    font-family: 'arial', 'Arial';
}
a {
    text-decoration: none;
    color:white;
}
header {
    position: fixed;
    z-index:10;
    background-color:#2e2f30; 
    bottom: 0;
    left:0;
    right:0;
    padding: 10px 0px;
    display: block;
}
nav {
    display: block;
}
ul.navbar, li.nav-item {
    list-style-type: none;
    padding:0;
    margin:0;
}
.navbar {
    width:100%;
    position: relative;
    display: flex;
}
.nav-item {
    width:25%; 
    text-align: center;
    color:white;
}
.nav-item p {
    margin:0;
    padding:0;
    font-size: .9em;
    font-weight: 100;
}
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
        <nav>
            <ul class="navbar">
                <li class="nav-item">
                    <a href="#home">
                    <i class="fas fa-home"></i>
                    <p>Home</p>
                    </a>
                </li>
            </ul>
        </nav>
    </header>
    <div class="page active-page" id="home">

    </div>

Note that if you click on the anchor tag but not on it's children elements the function will execute. How can I make the anchors tag's children execute the function as well? Any help appreciated.

Upvotes: 0

Views: 225

Answers (4)

Simranjit Singh
Simranjit Singh

Reputation: 404

Instead of binding event to the document try binding it to the anchor tag. I suggest bind event specifically to the a tags in navbar

let anchor = document.querySelector('.navbar a');
anchor.addEventListener('click', function(e){
   alert('BUTTON CLICKED');
});

Upvotes: 0

Fabrizio Mele
Fabrizio Mele

Reputation: 269

You could use the Element.matches api, to check if the clicked element is a child of your a. As far as I know event bubbling goes upwards.

document.addEventListener('click', function(e){
    if(e.target.matches('a *')){
     alert('BUTTON CLICKED');
    }
  })
  
body {
    padding:0;
    margin:0;
    background-color: #252526;
}
* {
    box-sizing: content-box;
    font-family: 'arial', 'Arial';
}
a {
    text-decoration: none;
    color:white;
}
header {
    position: fixed;
    z-index:10;
    background-color:#2e2f30; 
    bottom: 0;
    left:0;
    right:0;
    padding: 10px 0px;
    display: block;
}
nav {
    display: block;
}
ul.navbar, li.nav-item {
    list-style-type: none;
    padding:0;
    margin:0;
}
.navbar {
    width:100%;
    position: relative;
    display: flex;
}
.nav-item {
    width:25%; 
    text-align: center;
    color:white;
}
.nav-item p {
    margin:0;
    padding:0;
    font-size: .9em;
    font-weight: 100;
}
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
        <nav>
            <ul class="navbar">
                <li class="nav-item">
                    <a href="#home">
                    <i class="fas fa-home"></i>
                    <p>Home</p>
                    </a>
                </li>
            </ul>
        </nav>
    </header>
    <div class="page active-page" id="home">

    </div>

Upvotes: 0

vladys.bo
vladys.bo

Reputation: 740

In my opinion it will be better if you will change your HTML and styles.
HTML you have no reason to use <p> tag inside anchor and extra JS not needed:

<li class="nav-item">
  <a href="#home">
    <i class="fas fa-home"></i>
    Home
  </a>
</li>

CSS(set styles for a tag):

.nav-item a{
  display: block;
  text-decoration: none;
  color:white;
  margin:0;
  padding:0;
  font-size: .9em;
  font-weight: 100;
}

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You can use one more condition in OR operator as e.target.parentNode.tagName == "A" to check that the anchor element is the parent of the clicked element and it will work for you:

document.addEventListener('click', function(e){
    if(e.target.tagName=="A" || e.target.parentNode.tagName == "A"){
     alert('BUTTON CLICKED');
    }
  })
body {
    padding:0;
    margin:0;
    background-color: #252526;
}
* {
    box-sizing: content-box;
    font-family: 'arial', 'Arial';
}
a {
    text-decoration: none;
    color:white;
}
header {
    position: fixed;
    z-index:10;
    background-color:#2e2f30; 
    bottom: 0;
    left:0;
    right:0;
    padding: 10px 0px;
    display: block;
}
nav {
    display: block;
}
ul.navbar, li.nav-item {
    list-style-type: none;
    padding:0;
    margin:0;
}
.navbar {
    width:100%;
    position: relative;
    display: flex;
}
.nav-item {
    width:25%; 
    text-align: center;
    color:white;
}
.nav-item p {
    margin:0;
    padding:0;
    font-size: .9em;
    font-weight: 100;
}
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
        <nav>
            <ul class="navbar">
                <li class="nav-item">
                    <a href="#home">
                      <i class="fas fa-home"></i>
                      <p>Home</p>
                    </a>
                </li>
            </ul>
        </nav>
    </header>
    <div class="page active-page" id="home">

    </div>

Upvotes: 2

Related Questions