<form action= "123.html" ><div style= "Width:200px;height:200px;background: #ccc;" ><input type= "Submit" value= "commit" ><a href= "http://www.baidu.com" target= "_blank" >baidu</a>< /div></form> <script>$ (function () {Cancel bubbling and default behavior $ (' input '). Click (function (e) {e.stoppropagation ();// Suppress bubbling alert (' Input ');}); $ (' div '). Click (function (e) {e.stoppropagation ();//Suppress bubbling alert (' div ');}); $ (document). Click (function () {alert (' Document ');}); ------------------------------------------------------------------------elements in a Web page will have their own default behavior at the time of operation. For example: Right-click the text box input area, the system menu will pop up, click the hyperlink will jump to the specified page, click the Submit button will submit the data. $ (' a '). Click (function (e) {e.preventdefault ();//block default behavior alert (' a ');});
$ (' input '). Click (function (e) {e.preventdefault ();//block default behavior, prohibit form submission alert (' form submission ');}); The second method, recommended with the second method $ (' form '). Submit (function (e) {e.preventdefault ();//block default behavior, prohibit form submission}); The default behavior of $ (' a ') is blocked by the------------------------------------------------------------------------blocking bubbles. Click (Function (e) { E.preventdefault (); E.stoppropagation (); Alert (' a '); }); The second method is a shorthand scheme of $ (' a '). Click (function (e) {alert (' a '); return false;}); $ (' div '). Click (function (e) {alert (' div ');}); $ (document). Click (function () {alert (' Document ');}); ------------------------------------------------------------------------the use of isdefaultprevented and ispropagationstopped $ (' a '). Click (function (e) {e.preventdefault (); e.stoppropagation (); alert (e.isdefaultprevented ());//true Alert ( E.ispropagationstopped ()); true}); ------------------------------------------------------------------------write in two Click can also $ (' a '). Click (function (e) { E.preventdefault (); E.stoppropagation (); }); $ (' a '). Click (function (e) {alert (e.isdefaultprevented ()); True alert (e.ispropagationstopped ()); true}); ------------------------------------------------------------------------$ (' a '). Click (function (e) { E.stopimmediatepropagation (); Prevents bubbling and cancels the subsequent event alert (e.isimmediatepropagationstopped ()); True alert (' A1 '); }); $ (' a '). Click (function (e) {alert (' A2 ');}); $ (' div '). Click (function (e) {alert (' div ');}); $ (document). Click (function () {alert (' Document ');}); }) </script>
Jquery-Event object [bottom] bubble, default behavior
