JS Block event bubbling and default behavior Preventdefault, Stoppropagation, return False

Preventdefault:

Preventdefault It is a method of event object that cancels the default behavior of a target element. Since the default behavior is, of course, the element must have the default behavior to be canceled, and if the element itself has no default behavior, the invocation will of course be invalid. What elements have default behavior? such as link <a>, submit button <input type= "Submit" > etc. When the event object's cancelable is false, it means there is no default behavior, and even if there is a default behavior, calling Preventdefault will not work.

As we all know, the default action of link <a> is to jump to the specified page, as an example, block its jump:

Suppose there is a link <a href= "http://www.cnf2e.com/" id= "TestA" >cnf2e</a>

var a = document.getElementById ("TestA");

A.onclick =function (Event) {

Event.preventdefault ();

}

Stoppropagation:

Stoppropagation is also a method of event object that blocks the bubbling event of the target element, but does not block the default behavior. What is a bubbling event? If a button is bound to a "click" event, then the "click" event is triggered in turn in its parent element. Stoppropagation is the event that prevents the target element from bubbling to the parent element. Such as:

<div id= ' div ' onclick= ' alert ("div"); >

<ul onclick= ' alert ("ul"); >

<li onclick= ' alert ("Li"); >test</li>

</ul>

</div>

The above code, when we click Test, will trigger alert ("Li"), Alert ("UL"), Alert ("div"), which is event bubbling.

When we need to stop bubbling, we have to use stoppropagation.

<div id= ' div ' onclick= ' alert ("div"); ' >

<ul onclick= ' alert ("ul"); >

<li id= ' ul-a ' onclick= ' alert ("Li"); Event.stoppropagation () ' >a</li>

</ul>

</div>

When you click "Test", only alert (' Li ') will be prompted;

return false:

Many JS codes are now written directly using jquery, which, when using return False in jquery, is equivalent to using both Event.preventdefault and event.stoppropagation, which prevents bubbles from blocking the default behavior. However, when using native JS write, return false will only block the default behavior. The following two sections of code illustrate

When using the native JS method, return False only blocks the default behavior, but does not prevent bubbling

<div id= ' div ' onclick= ' alert ("div"); >

<ul onclick= ' alert ("ul"); >

<li id= ' ul-a ' onclick= ' alert ("Li"); ><a href= "http://www.cnf2e.com" id= "Testb" >cnf2e.com</a></li>

</ul>

</div>

var a = document.getElementById ("Testb");

A.onclick = function () {

return false;

};

When using the JQuery method, return false will block the default behavior, and will also prevent bubbling

<div id= ' div ' onclick= ' alert ("div"); >

<ul onclick= ' alert ("ul"); >

<li id= ' ul-a ' onclick= ' alert ("Li"); ><a href= "http://www.cnf2e.com" id= "TESTC" >cnf2e.com</a></li>

</ul>

</div>

$ ("#testC"). On (' click ', function () {

return false;

});

JS Block event bubbling and default behavior Preventdefault, Stoppropagation, return False