Angular 2 - Prevent click on child when clicked on parent element?

Question

When I clicked on anchor tag onClick function is called but its child elements onclick function also called with it. I want to prevent this if parent element is clicked then why its child elements clicked with it.

Here is the code:


      
        
            C
        
        {{category.title}}
        
      
      
          
              
                  
                    
                        {{subcategory.title.charAt(0)}}
                    
                    {{subcategory.title}}

.ts

toggle(e) {
    if(e.target || e.srcElement || e.currentTarget){
        console.log(e.target.parentNode)
    }
}

Output in browser console window:

Ahmer Ali Ahsan · Accepted Answer

Answer:

In my case below code works:

But I don't know how #myElement is preventing child elements to be clicked. BTW this is working fine and I'm getting the actual element on which I had clicked.

Here is my .html code:


      
        
            C
        
        {{category.title}}
        
      
      
          
              
                  
                    
                        {{subcategory.title.charAt(0)}}
                    
                    {{subcategory.title}}

Here is my .ts code:

onClick(e) {
    console.log('HTML Element ID: ' + e);
}

Angular 2 - Prevent click on child when clicked on parent element?

Answers (2)

Related Questions