Скачать или смотреть How to Have a Different onClick Event for Child Elements Without Affecting the Parent

Learn how to handle `onClick` events in JavaScript, ensuring that child elements trigger their own events without invoking the parent’s event handler.
---
This video is based on the question https://stackoverflow.com/q/74812332/ asked by the user 'Leo Messi' ( https://stackoverflow.com/u/9099077/ ) and on the answer https://stackoverflow.com/a/74812443/ provided by the user 'Mihai Matei' ( https://stackoverflow.com/u/1545088/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to have a different onClick event for the child element without affecting the parent one?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding Click Events in JavaScript: Child vs Parent

In web development, managing click events can sometimes become tricky, especially when you have nested elements. A common problem is when you want a child element to respond to a click without triggering the parent element's click event. This situation can lead to unintended consequences, making your application behave unexpectedly.

The Problem

Let's consider a simple HTML structure:

[[See Video to Reveal this Text or Code Snippet]]

In this structure, clicking on the icon (<i>) is intended to only log the child event (doChildStuff). However, the current setup results in both doChildStuff and doParentStuff being triggered. This happens because of a phenomenon known as event bubbling, where events propagate up the DOM tree.

The Solution: Stopping Event Propagation

To resolve this issue, you'll want to ensure that when the child element is clicked, it does not trigger the parent's click event. This can be achieved by using stopPropagation() on the event object in the child's event handler. Here’s how to effectively implement this:

Step-by-Step Implementation

Define Your Functions:
First, you need to define the functions that will handle the click events for both the child and parent elements. Make sure to include the event parameter for the child function.

[[See Video to Reveal this Text or Code Snippet]]

Modify Your HTML Structure:
Update the HTML to correctly reference the child click event function while passing the event object. Here’s an updated version of your HTML:

[[See Video to Reveal this Text or Code Snippet]]

Breakdown of the Code

Event Propagation Control: By calling e.stopPropagation() within doChildStuff, you prevent the click event from bubbling up to the parent link (<a>). This means only the child's click event is executed, as intended.

User Interaction: The user can still click anywhere else inside the parent (<div class="the-parent">) to trigger the parent’s event without interference from the child’s click.

Result

With this solution in place, you maintain a clean separation of responsibilities between parent and child click events. Clicking on the child (button) will only log "child clicked," whereas clicking anywhere else within the parent will log "parent clicked."

Summary

Understanding how event bubbling operates allows you to design better user interactions on your web applications. By utilizing stopPropagation, you can effectively manage click events, ensuring that child elements can perform their actions without affecting their parent elements.

Now you can implement your click events confidently, providing a smoother experience for users.