How to prevent event bubbling in JavaScript

What we need to pay attention to is that the characteristics of event bubbling itself will bring disadvantages as well as benefits. I will explain it in detail in subsequent blogs.

So here we will discuss how to prevent event bubbling.
For example, now there is a child box and a parent box. Both the child box and the parent box have click events, but at this time, when we click the child box, we only want the child box to display the click event. Here we need to use the method of preventing event bubbling to isolate the event display of the parent box.

First create two boxes and add click events to them, as shown below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            margin: 100px auto;
            width: 100px;
            height:100px;
            overflow: hidden;
            background-color: palegreen;
        }
        .son{
            width: 50px;
            height: 50px;
            margin-left: 25px;
            margin-top: 25px;
            background-color: paleturquoise;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
       son.addEventListener('click',function(){
            alert('son');
        },false)
        father.addEventListener('click',function(){
            alert('father');
        },false)
    </script>
</body>
</html>

When we click on the click event of the child box, the print result is:

How should we block the click event of the parent box?

You can add stopPropagation() method directly to the click event inside the subbox.

As shown below:

son.addEventListener('click',function(e){
            alert('son');
            e.stopPropagation();
        },false)

At this point, the running result is:

Blocking success.

However, it should be noted that this method also has compatibility issues. In lower-version browsers (IE 6-8), the cancelBubble property of the event object is usually used for operation. That is, add it directly in the corresponding click event:

e.cancelBubble = true;

If we want to solve this compatibility problem, we can use the following method:

if(e && e.stopPropagation){
      e.stopPropagation();
  }else{
      window.event.cancelBubble = true;
  }

This is the end of this article about preventing event bubbling based on JavaScript. For more relevant content about preventing event bubbling based on JavaScript, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Detailed explanation of JS method to prevent event bubbling
JavaScript capture event and prevent bubbling event example analysis
A brief discussion on how to stop js event bubbling to prevent the default behavior of the browser (preventing hyperlinks#)
JavaScript prevents event bubbling and browser default behavior
Detailed explanation of js preventing bubbling and default events (default behavior)
Detailed explanation of js event bubbling, event capture and blocking default events
Tips for JS work: "Closure" and "Preventing Bubbling" of Event Delegation

<<: After reading the introduction of CSS box model, you will not be confused

>>: HTML code text box limit input text box becomes gray limit text box input