When does this problem exist? When a behavior triggers an event for more than one object. <body> <div class= "fa" > <div class= "son1" > <div class= "son2" ></div> </div> </div> <script type= "Text/javascript" > var fa = document.getelementsbyclassname (' fa ') [0]; var son1 = document.getelementsbyclassname (' son1 ') [0]; var son2 = document.getelementsbyclassname (' son2 ') [0]; Fa.addeventlistener ("click", Function (e) {console.log (' FA '); E.stoppropagation ();},true); Son1.addeventlistener (' click ', Function () {console.log (' son1 ')},false); Son2.addeventlistener (' click ', Function () {console.log (' son2 ')},true); </script>addeventlistener when the third parameter is not written, the default is False,true is executed during the event capture phase, and false represents the event bubbling phase. E.stoppropagation () allows a behavior to execute only one object's events.
Event bubbling and event capture in JS