Limiting the click event to the parent div only

Question

Limiting the click event to the parent div only

I've encountered a problem with my overlay setup. I have an overlay with a child div inside, and I want the overlay to close only when the user clicks on the overlay itself, not the child div. Even though I've implemented the closing function, it still closes when the user clicks on the child div. How can I resolve this issue?

<div id="overlay" onClick={this.props.hideOverlay}>

                <div className="ques_preview_div">

                </div>
</div>

The goal is for the overlay to remain open if the user clicks anywhere within the child div.

<div className="ques_preview_div">

</div>

html css reactjs

Answer 1

Answer №1

I attempted to resolve the issue with my initial answer, but it was unsuccessful. As a result, I decided to create a CodePen demo to demonstrate the solution.

function childClick(event){
  event.stopPropagation()
  console.log('child')
}

The root of the problem lies in the event bubbling behavior of the child element. Even if the child element does not have an onClick function, a click event will still bubble up to its parent element and trigger its onClick function. To prevent this, we need to add an onClick listener to the child element and use stopPropagation() method to stop the event from propagating further.

Answer 2

I attempted to resolve the issue with my initial answer, but it was unsuccessful. As a result, I decided to create a CodePen demo to demonstrate the solution.

function childClick(event){
  event.stopPropagation()
  console.log('child')
}

The root of the problem lies in the event bubbling behavior of the child element. Even if the child element does not have an onClick function, a click event will still bubble up to its parent element and trigger its onClick function. To prevent this, we need to add an onClick listener to the child element and use stopPropagation() method to stop the event from propagating further.

Limiting the click event to the parent div only

Answer №1

Similar questions

Need to conceal certain images in Isotope, but ensure they can easily be revealed when necessary?

Shifting a div element around the webpage and letting it fall into place if it intersects with another div using plain JavaScript

What's the best way to vertically center a div with a 100% width and a set padding-bottom on the screen?

Run Python scripts on imported files

Tips on confirming the completion of my form when the next button is pressed

Ways to selectively expand a single collapse panel in ant-design

Ways to ensure a function is only triggered once using onmouseover

dividing an HTML string into individual variables using JavaScript

There is a lag in the loading of css stylesheets

IE6 disrupts stored layouts

Unlocking the full potential of Konva Node in your ReactJs projects

Checking for the Existence of a Class Element within a String using JavaScript

The Bootstrap 4 column is not floating properly to the right as it is leaving a gap on the

Retrieving the output from a nested scope within a function

What could be the reason for the unexpected behavior of position sticky?

NextJS router.push() function is malfunctioning and not behaving as intended

Attempting to include two runat=server forms within a single ASP.NET web form

What is the reason behind the overflow in the HTML body?

Utilizing DRACOLoader alongside GLTFLoader within ReactJs

Having trouble with the functionality of my JavaScript slider