Anchor tag not clickable, clickable area over the <a> tag

Question

I've got some HTML structure with CSS

The Anchor tag is located somewhere in the wrapper (doesn't matter that much where) and it's not clickable because of the wrapper Event that's being attached on the div in Angular 4 version, only the wrapper click event fires and not the link Event. No bubbling happening or anything.

.wrapper {
  width: 250px;
  height: 250px
}

<div class="wrapper" (click)="someFunction()">
  <a (click)="someOtherFunction()"></a>
<div>

Answer 1

Question : Why both the events are not triggered..?

Answer : Since here you have wrapped div on anchor tag which is a type of inline container tag , and you also have not written any text inside the anchor tag. Which means nothing in div.

Try this:

<div class="wrapper" (click)="someFunction()">
  <a (click)="someOtherFunction()">Click Here</a>
<div>

• This way when you click on link both the event will be triggered.
• When you click on the area outside of the link only the event attached with div will be triggered.