Home >Web Front-end >JS Tutorial >How to Prevent Parent Event Handlers from Executing When a Child Event is Triggered in Nested DOM Objects?

How to Prevent Parent Event Handlers from Executing When a Child Event is Triggered in Nested DOM Objects?

Susan SarandonOriginal: 2024-11-24 08:45:11305browse

Maintain Event Progression in Nested DOM Objects

In a nested DOM structure where event handlers are defined on multiple levels, it's often desirable to prevent the execution of parent event handlers when a child event is triggered. Consider the following example:

<div><pre class="brush:php;toolbar:false"><div>

In this structure, a click on any div element invokes the "func" function. However, there's an issue: a click on "b" or "c" triggers the "func" function for both the clicked div and its parent div, "a".

Solution: Event Propagation Control

jQuery provides a method for preventing the propagation of events up the DOM tree. By adding the following code before defining the event handlers:

$('#a').add('#b').click(function(event) {
    event.stopPropagation();
});

you can prevent clicks on "b" or "c" from propagating the event to their parent, "a". This ensures that only the clicked child div's function will be executed.

By controlling event propagation, you can maintain the desired event flow in your nested DOM structure and prevent unintentional function executions.

The above is the detailed content of How to Prevent Parent Event Handlers from Executing When a Child Event is Triggered in Nested DOM Objects?. For more information, please follow other related articles on the PHP Chinese website!

for Event function dom this issue

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Optimizing External Libraries with the defer Attribute: Boosting Page SpeedNext article：Optimizing External Libraries with the defer Attribute: Boosting Page Speed

See more

How to Prevent Parent Event Handlers from Executing When a Child Event is Triggered in Nested DOM Objects?

Related articles