Before looking at the manual to see the concept of the event object, I want to achieve is to click a text box appears a Lado box, in the text box to lose focus is triggered blur event, so that the dropdown box hidden. But when I want to choose a multiple selection box is also make it hidden, you can not make a choice, which makes me very depressed. After a day of searching the information, finally in the focus of this piece. Found on the internet there is an event bubbling something that can be realized by clicking on my feature.
E.stoppropagation () block event bubbling
Copy Code code as follows:
<title></title>
<script src= "Scripts/jquery-1.4.1.js" type= "Text/javascript" ></script>
<body>
<table>
<tr>
<td><span> Bubbling Event Test </span></td>
</tr>
</table>
</body>
Let's look at the code first:
Copy Code code as follows:
<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 will see the situation: Span alert-> TD Alert-> Table alert. This is called event bubbling. From bottom to top, from inside to outside, events are triggered sequentially. The conditions that can be triggered in turn are multiple nested tags that have the same event, and the tangent event synchronously occurs and the response of the same event is implemented from the inside out.
Sometimes we don't want events to bubble up?
Copy Code code as follows:
<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>
When I implement the Click event for the entire document, you can block event bubbling for text boxes and Drop-down boxes so that you click on them without causing the document to trigger events.
If you want to obtain event-related information, you should add an E object to the knowledge method, and E is the event object.
E.preventdefault () blocks the event default behavior.
Copy Code code as follows:
$ ("a"). Click (function (e) {
Alert ("Default behavior is prohibited");
E.preventdefault ();
});
<a href= "http://www.baidu.com" > Test </a>
Return false is equivalent to calling both E.preventdefault () and E.stoppropagation ()
Return false prevents event bubbling, in addition to blocking the default behavior. If you have a jquery source code in your hand, you can view the following code:
Copy Code code as follows:
if (Ret===false) {
Event.preventdefault ();
Event.stoppropagation ();
}
