Two ways to block event bubbling with JS

I. Introduction to bubbling Events

When we click on a control, if the parent control that includes the control also has the Click event, it will continue to execute.

Method One: Event.stoppropagation ();

For example:

<div><p>Paragraph text content<input Type="Button" Value=Click /> </p></div>    

HTML code:

Bind the Click event for all DIV elements$("Div").Click( function(Event){Alert("Div-click");} );Bind the Click event for all P elements$("P").Click( function(Event){Alert("P-click");} );Bind the Click event for all button elements$(": Button").Click( function(Event){Alert("Button-click");Block events from bubbling to the DOM treeEvent.Stoppropagation(); //only executes the click of the button, and if the line is commented out, the click   }      

Method Two: Event.target

EventEvent.targetDOM APIJquery. TargetDomThisDom$ (document). Ready (function () {
$ (' #switcher '). Click (Function (event) {
$ (' #switcher. Button '). Toggleclass (' hidden ');
})
})

$ (document). Ready (function () {
$ (' #switcher '). Click (Function (event) {
if (event.target==this) {
$ (' #switcher. Button '). Toggleclass (' hidden ');
}
})
})
<div id= "switcher" > .

JS Block event bubbling in two ways