Summary of several ways to prevent events from bubbling

JavaScript way to prevent events from bubbled

In JavaScript, event bubbles are the process by which events propagate upwards from trigger elements to their ancestor elements. Preventing events from bubbling can prevent events from spreading to parent elements or other ancestor elements. Here are a few ways to stop events from bubbled up:

1. Use ()

• effect：

  • Prevent the event from continuing to bubble upwards.

('child').addEventListener('click', function(event) {
  ('Child clicked');
  (); // Prevent events from bubbles});
('parent').addEventListener('click', function() {
  ('Parent clicked'); // Will not execute});

2. Use  ()

• effect：

  • Blocks events from bubbles and prevents other event listeners from executing on the same element.

('child').addEventListener('click', function(event) {
  ('First listener');
  (); // Block bubbling and other listeners});
('child').addEventListener('click', function() {
  ('Second listener'); // Will not execute});
('parent').addEventListener('click', function() {
  ('Parent clicked'); // Will not execute});

3. Use return false (jQuery only)

• effect：

  • In jQuery,return falseIt will prevent event bubbles and default behavior at the same time.

$('#child').on('click', function() {
  ('Child clicked');
  return false; // Block bubbling and default behavior});
$('#parent').on('click', function() {
  ('Parent clicked'); // Will not execute});

4. Use event delegation and conditional judgment

• effect：

  • Through event delegation and conditional judgment, the event will be indirectly prevented from bubbled.

('parent').addEventListener('click', function(event) {
  if ( === 'child') {
    ('Child clicked');
    return; // Prevent the parent element from processing events  }
  ('Parent clicked');
});

5. Block default behavior and bubbles

• effect：

  • Block event bubbles and default behaviors at the same time.

('child').addEventListener('click', function(event) {
  ('Child clicked');
  (); // Block default behavior  (); // Prevent events from bubbles});
('parent').addEventListener('click', function() {
  ('Parent clicked'); // Will not execute});

Summarize

Selecting the appropriate method according to specific needs can effectively control the propagation and behavior of events.

The above is a detailed summary of several methods to prevent events from bubbled. For more information about JavaScript from preventing events from bubbled, please pay attention to my other related articles!