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

Susan Sarandon

Release： 2024-11-24 08:45:11

Original

294 people have browsed it

<div><div class="code" style="position:relative; padding:0px; margin:0px;"><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!