How does Javascript prevent event propagation?

In JavaScript, you can use the event object's methods to prevent event propagation. Event propagation means that when an event is triggered on an element, the event will be propagated to parent elements or ancestor elements in the event stream, thereby affecting them.

There are three stages of event propagation: capture stage, target stage and bubbling stage. The method used to prevent the spread of an event depends on the stage at which you wish to stop the spread.

Here are common ways to stop the spread of an incident:

1. event.stopPropagation(): Calling this method can prevent the event from continuing to propagate on the current element, whether in the capture phase or the bubbling phase. If the event is triggered during the capture phase, calling this method will prevent it from entering the bubbling phase, thus not affecting the parent element and its ancestors. If the event is triggered during the bubbling phase, calling this method will immediately stop bubbling and will not propagate to the parent element and its ancestor elements. If there are multiple event handlers on the same element, calling this method will only prevent the event from propagating, but will not affect the execution of other handlers.
Example:

element.addEventListener('click', function(event) {
    
    
  event.stopPropagation();
  // 其他事件处理代码
});

2. event.stopImmediatePropagation(): Similar to event.stopPropagation(), but more powerful. Calling this method will not only stop the propagation of events on the current element, but also prevent other events of the same type from continuing to fire. Even if there are multiple event handlers on the same element, as long as one of them calls this method, the other handlers will not be executed. This method is useful if you have multiple event handlers bound to the same element and you want to prevent the other handlers from executing after the first handler is executed. Example:

element.addEventListener('click', function(event) {
    
    
  event.stopImmediatePropagation();
  // 其他事件处理代码
});

It's important to note that while blocking event propagation can solve some problems, misusing it can lead to unpredictable behavior in event handling. When using it, carefully consider whether you need to prevent event propagation based on actual needs.