Both parent and child links open

Question

I have a parent <a> with an href attribute. I have a child <p> and I want a small box to be opened when I click on child element.

The problem is when I click on the child element, it opens the small box but after a second the parent link opens up too. I don't want the parent link to be opened when I click on child element. I added event.stopPropagation() but it doesn't change anything. I also added z-index property but no changes either.

In my JS Fiddle demo you can see a live example; but here is my code so far:

.parent {
  background-color: blue;
  display: inline-block;
  width: 400px;
  height: 300px;
  z-index: 1;
}

.child {
  color: black;
  background-color: yellow;
  display: inline-block;
  width: 100px;
  height: 50px;
  z-index: 2;
}

[title] {
  position: relative;
  display: inline-flex;
  justify-content: center;
}

.child:focus::after {
  content: attr(title);
  position: absolute;
  top: 90%;
  color: #000;
  background-color: #fff;
  border: 1px solid;
  width: fit-content;
  padding: 3px;
  font-size: 10px;
  z-index: 20;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<a class="parent" href="https://www.google.com/">
  <p class="child" title="This is mobile tooltip" tabindex="0" (click)="$event.stopPropagation();">Click</p>
</a>

JS Fiddle demo

PS: I cannot use jQuery.

Thanks.

Answer 1

Let me explain What I did was create a variable that changed whenever it hovered on the element or off the element. Next Whenever the user clicked on it I just ran a check to see if the mouse was not hovering on the element and executed a code if was on the element I ran a other code

var mouse = false;

function mouseStatus(n) {
  mouse = n;
}

function parent() {
  if (mouse == false) {
    console.log('parent');
    window.open('www.google.com');
  }
}

function child() {
  console.log('child');
}

.parent {
  background-color: blue;
  display: inline-block;
  width: 400px;
  height: 300px;
  z-index: 1;
}


.child {
  color: black;
  background-color: yellow;
  display: inline-block;
  width: 100px;
  height: 50px;
  z-index: 2;
}

[title] {
  position: relative;
  display: inline-flex;
  justify-content: center;
}

.child:focus::after {
  content: attr(title);
  position: absolute;
  top: 90%;
  color: #000;
  background-color: #fff;
  border: 1px solid;
  width: fit-content;
  padding: 3px;
  font-size: 10px;
  z-index: 20;
}

<a class="parent" onclick="parent()">
  <p class="child" title="This is mobile tooltip" onmouseover="mouseStatus(true);" onmouseout="mouseStatus(false);" onclick="child()">Click</p>
</a>

Answer 2

call a function instead :

onEvent(event) {
   event.stopPropagation();
    return false;
}

calling the function with

(click) ="onEvent($event)"