Parent and child hyperlinks both lead to new pages

Question

Parent and child hyperlinks both lead to new pages

I am facing an issue where a parent <a> with an href attribute contains a child <p>. My goal is to have a small box appear when the child element is clicked. However, the problem arises when clicking on the child element not only opens the small box but also triggers the parent link to open after a second. I do not want the parent link to open when clicking on the child element. Even after adding event.stopPropagation() and adjusting the z-index property, the issue persists.

You can view a live example in my JS Fiddle demo, but below is my current code:

.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

Note: Using jQuery is not an option for me.

Thank you.

javascript html css angular typescript

Answer 1

Answer №1

Allow me to elucidate. What I accomplished was the creation of a variable that toggled whenever it hovered over or away from the element. Subsequently, when the user clicked on it, a conditional check was initiated to determine if the mouse cursor was not hovering over the element, and a specific code block was executed accordingly. If the cursor was indeed over the element, another code block was triggered.

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

Allow me to elucidate. What I accomplished was the creation of a variable that toggled whenever it hovered over or away from the element. Subsequently, when the user clicked on it, a conditional check was initiated to determine if the mouse cursor was not hovering over the element, and a specific code block was executed accordingly. If the cursor was indeed over the element, another code block was triggered.

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 3

Answer №2

Instead of directly executing, consider calling a function :

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

To execute the function use:

(click) ="handleEvent($event)"

Answer 4

Instead of directly executing, consider calling a function :

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

To execute the function use:

(click) ="handleEvent($event)"

Parent and child hyperlinks both lead to new pages

Answer №1

Answer №2

Similar questions

span element causing border-spacing problem

Restrict the properties of an object to match the properties of a different object

Encountering a proxy error while attempting to create an account or log in, with no network

Exploring the wonders of looping through arrays with JavaScript and jQuery

Tips for moving directly to a section while maintaining a set distance from the top of the page

Substitute the division

Modify a property of an object using the useState Hook, where the property name is dynamically retrieved from a variable

I'm looking to convert this typescript function to return an array with strong typing instead of just a plain string[]

TypeScript typings for generic currying functions

The JavaScript code does not call an external function to retrieve data from the database

Input new information into the Google Spreadsheet Database

Can the flat input structure be retained while using nestjs/graphql Args?

Divide a cell table into multiple rows without distorting the table format

What is the most effective method for managing various types of single quotes (’) and (') in jQuery, Perl, and Mechanize?

Validation of Forms and Displaying Error Messages in Angular 7

Issue with Django Form not showing up on HTML after encountering an error

The MUI Select component requires two clicks to open its menu if another Select component's menu is already open

Is it feasible to automatically fill out a separate form by clicking a link?

Is there a way to continuously iterate this PL/SQL statement in order to display numerous markers on my Google map?

What is the best way to transform a ternary operation into an Enum Map with custom properties