E. stopPropagation () prevents event bubbles
<Head>
<Title> </title>
<Script src = "Scripts/jquery-1.4.1.js" type = "text/javascript"> </script>
</Head>
<Body>
<Table>
<Tr>
<Td> <span> bubble event test </span> </td>
</Tr>
</Table>
</Body>
Let's first look at this Code:
<Script type = "text/javascript">
$ (Function (){
$ ("Table"). click (function () {alert ("table alert ");});
$ ("Td"). click (function () {alert ("td alert ");});
$ ("Span"). click (function (){
Alert ("span alert ");
});
});
</Script>
We can see the following situation: span alert-> td alert-> table alert. This is called event bubbling. Events are triggered from bottom to top, from inside to outside.
Sometimes we don't want event bubbles. What should we do?
<Script type = "text/javascript">
$ (Function (){
$ ("Table"). click (function () {alert ("table alert ");});
$ ("Td"). click (function () {alert ("td alert ");});
$ ("Span"). click (function (e ){
Alert ("span alert ");
E. stopPropagation ();
});
});
</Script>
To obtain event-related information, add an e object to the knowledge method. e is the event object.
E. preventDefault () blocks default event behavior.
$ ("A"). click (function (e ){
Alert ("forbidden by default ");
E. preventDefault ();
});
<A href = "http://www.baidu.com"> test </a>
Return false is equivalent to calling e. preventDefault () and e. stopPropagation () at the same time ()
In addition to blocking default behaviors, return false also prevents event bubbles. If you have a copy of jquery source code, you can view the following code:
If (ret = false ){
Event. preventDefault ();
Event. stopPropagation ();
}