jquery Learning Essays (bubbling and Default behavior)

If more than one element is overlapped in the page, and the overlap is bound to the same event on those elements, then a bubbling problem occurs (these elements are within a div or a box model)

$ (' input '). Click (function () {    alert (' Input ');}) $ (' div '). Click (function () {    alert (' Input ');}) $ (' document '). Click (function () {    alert (' Input ');}) <  style= "Width:200px;height:200px;background: #ccc;" >    <  type= "Buttom"></div> three need to click on the time, click on the document back to pop up the document, click on the div will pop up Div, followed by pop-up document, click on input when pop-up input, follow-up Div, then document, This bubbling behavior, from the current element upward

Provides a way to block upward bubbling in jquery

$ (' input '). Click (function (e) {    e.stoppropagation ();  Disable bubbling    alert (' Input ');})

A blocking default behavior

$ (' a '). Click (function (e) {     e.preventdefault;
     Alert (' Come on! }) You can prevent jumps after clicking the hyperlink, while preserving the effect of the hyperlink. After clicking, only the refueling will pop up.

You can block form submissions in a form

$ (' input '). Click (function (e) {    e.preventdefault;    Alert (' form submission '); A better approach is to block $ (' form ') on the form label. Submit (Function (e) {    e.preventdefault;})                            

Prevent bubbling while blocking the default behavior, shorthand direct return False

$ (' a '). Click (function (e) {   alert (' Refueling! ');   return false;        Blocking the bubbling behavior while prohibiting the default behavior})

Stopimmediatepropagation () and cancels subsequent event handlers for the event, that is, canceling the same event and no longer executing

jquery Learning Essays (bubbling and Default behavior)