What is the best way to eliminate the click event from a child element?

Can you help me with this issue? I have a navigation bar with an item called "Author" that shows author information in a dropdown when clicked. The problem is that the dropdown is clickable, causing it to disappear. I want it to only show and close within the navigation bar itself.

<div id = 'Author' class = 'navbarItem'>Author
   <div id = 'authorInfo'>
         // info about author
   </div>


const author = document.getElementById('Author');
const authorInfo = document.getElementById('authorInfo');

author.onclick = () => {
     if(authorInfo.style.display == 'none' || authorInfo.style.display== '')
          authorInfo.style.display = 'block'
     else 
          authorInfo.style.display = 'none';     
}

I've attempted setting the onclick event of authorInfo to null, but that doesn't solve the issue.

javascriptevents

Answer №1

To ensure that a click event occurred on the container and not its child, add the event parameter to the listener. The event.target will contain the element that was clicked.

const author = document.getElementById('Author');
const authorInfo = document.getElementById('authorInfo');

// The function needs the event parameter
author.onclick = function(event) {
     // Check if the clicked element is the author div and not its child
     if(event.target == author) {
         if(authorInfo.style.display == 'none' || authorInfo.style.display == '')
             authorInfo.style.display = 'block'
         else 
             authorInfo.style.display = 'none';     
     }
}
<div id='Author' class='navbarItem'>Author
   <div id='authorInfo' style="display:none;">
         // info about author
   </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The process of converting a response into an Excel file

After sending a request to the server and receiving a response, I am struggling with converting this response into an Excel file. Response header: Connection →keep-alive cache-control →no-cache, no-store, max-age=0, must-revalidate content-dispositio ...

javascriptangularjsexcel

Let's update the VUE app's development server to point to my-testing-web-address.com instead of the default localhost:

I am working on a VUE application and I am trying to run it on an external link instead of localhost. I attempted to configure a vue.config.js devServer: { host: 'http://my-testing-web-address.com', port: 8080, ... } and adjusted t ...

javascriptvue.jslocalhostwebpack-dev-serverdevserver

Acquiring and showcasing the mongoose schema property

Within my mongodb collection, I have a plethora of jokes stored, the schema is structured as below: const mongoose = require ("mongoose"); // Dad Joke Schema const jokeSchema = new mongoose.Schema({ content: String }); module.exports = mongoose.mode ...

javascriptnode.jsmongodbexpress

What causes the "Error: method not allowed" message to appear when attempting to send a "DELETE" request from a Next Js component? (The POST method is

This is my first time on this platform, and I'm currently following a tutorial from Javascript Mastery to create a clone of a thread application. After watching the entire video and building the basic functionality based on it, I decided to enhance th ...

javascriptreactjstypescriptnext.jsreact-hooks

An issue arises in Javascript when attempting to select a row in a gridview by clicking

I have recently implemented a click event for the rows in a devexpress gridview on the server-side using VB.net. Protected Sub gvSubNotes_HtmlRowPrepared(sender As Object, e As ASPxGridViewTableRowEventArgs) e.Row.Attributes.Add("onclick", S ...

javascript.netonclickaspxgridview

Incorporating an HTML/Javascript game into a reactJS website: A step-by-step

After developing a game using plain javascript and HTML along with a few JS libraries, I find myself inquiring about the process of integrating this game into my ReactJS website. Typically, the game is initiated by opening the index.html file located with ...

javascripthtmlreactjs

What is the best way to create random integers using JavaScript?

Is there a way to create a function called drawSomething(x, y, color, boolean) that will generate random integers for the position of x and y on the canvas, randomly select a color from red, yellow, or blue, and randomly assign true or false to the boole ...

javascriptarrayscanvasrandom

The concept of an undefined object without a question mark is frowned upon

Consider the following code snippet: app-config.json { "auth": { "clientId": "acb610688b49", }, "cache": { "cacheLocation": "localStorage" }, "scopes": { "loginRequest": ["openid", "profile", "user.read"] }, "resources": { " ...

javascripttypescript

Create a typescript class object

My journey with Typescript is just beginning as I delve into using it alongside Ionic. Coming from a background in Java, I'm finding the syntax and approach quite different and challenging. One area that's giving me trouble is creating new object ...

javascripttypescript

What steps can I take to successfully run Node.js within Eclipse when the JavaScript runtime is not showing up in the preferences?

I have been encountering some difficulties with integrating Node.js into my Eclipse IDE for enterprise Java developers. I am using Eclipse Ide 2021-06 and have installed Node.js 16.3 along with npm. According to the Eclipse news, Eclipse Neon and later ve ...

javascriptnode.jseclipse

"Displaying an array using React Hooks' useState causes the content to

I want to enhance my image uploading functionality in useState by implementing a specific function. Once the images are uploaded, I need to render them on the page. However, I am facing an issue with rendering the returned array. Here is the current code ...

javascriptarraysreactjsreact-hooks

What is the best way to access specific information about the top card in a Trello list?

Is there a way for me to retrieve the name, label, and due date of the top cards in a Trello list on my board and then send it through Discord using my bot? I would greatly appreciate any guidance on how to achieve this. ...

javascriptarraysdiscord.jstrello

The error message thrown is: "TypeError - attempting to call an undefined function

I'm new to working with node and express, and I encountered an error when running my App. Does anyone have any solutions? I suspect the error may be in this line "app.use(express.static(user));" but I'm not certain. var express = require('e ...

javascriptnode.jsexpress

Send information using AJAX within a .NET integrated browser

In our current setup, we utilize a .NET embedded browser to showcase an HTML page that is generated by applying an XSLT file to an XML file using .NET. This process results in HTML content displayed within the embedded browser through the DocumentText prop ...

javascriptjqueryhtml.netajax

Merge two lists together based on their text properties and include an additional value

I am looking to transfer the values in brackets from the second list to the first one. My attempt at achieving this is shown below: $('#views-exposed-form-cat-watch-block .form-type-radio label.option').each(function(){ var a = this; $(& ...

javascriptjquery

What is the best way to properly format the retrieved JSON string using Ext JS?

After receiving the JSON data shown below, I need to change the formatting of the string values in the 'code' field. For example, 'TOTALPENDING' should display as "Pending Bonus" and 'TOTALLEFT' as "Current Bonus". How can I m ...

javascriptjsonstringextjsformat

Validation of dynamically added form fields in React

I recently developed a form in React with 2 fields, and I have successfully implemented functionality to add two more fields when the "add" button is clicked. However, I am now facing the challenge of validating these additional fields. Can anyone provide ...

javascriptarraysreactjsformsvalidation

Guide on how to send files to an API using a form in React with MUI

I am struggling with sending an image through the front-end to my back-end application that is set up to accept data. Here is the code I have: import { useState } from 'react'; import axios from '../../config'; import { useNavigate } fr ...

javascriptreactjsmaterial-ui

Is there a method to dynamically conceal a div element in the source code during runtime?

Is it possible to dynamically hide a div element from the page's source code during runtime using JavaScript, jQuery, or any other method? For example: <div id="abc"> This content should not appear in either the source code or on the visible w ...

javascriptphpjqueryhtml

AJAX functions are only executed during the initial loading of a page

I am facing an issue with my website where dynamically created URLs are not refreshing the page data on the second click. The initial click triggers an ajax query to load new data successfully, but subsequent clicks do not execute the query. Below is the ...

javascriptjqueryajax