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

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:

<li *ngFor = "let category of categories">
      <a href="javascript:void(0);"  (click)="toggle($event);">
        <span class="ah-pull-left" style="padding: 7px 10px;font-size: 14px;">
            <span class="ah-hexa">C</span>
        </span>
        <span class="ah-pull-left">{{category.title}}</span>
        <span class="ah-pull-right ah-sidebar-down-arrow" *ngIf = "category.submenu.length > 0"><i class="fa fa-angle-down" aria-hidden="true"></i></span>
      </a>
      <div id="{{category.id}}" class="ah-sidebar-sub-menu" *ngIf = "category.submenu">
          <ul>
              <li *ngFor = "let subcategory of category.submenu">
                  <a href="{{subcategory.link}}">
                    <span class="ah-pull-left" style="font-size: 14px;">
                        <span class="ah-hexa">{{subcategory.title.charAt(0)}}</span>
                    </span>
                    <span class="ah-pull-left">{{subcategory.title}}</span>
                    </a>
              </li>
          </ul>
      </div>
    </li>

.ts

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

Output in browser console window: