Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> event bubbling and blocking Bubbles </title>
<script src= "Js/jquery.min.js" type= "Text/javascript" ></script>
<body>
<script type= "Text/javascript" >
$ (function () {
$ ("Div li"). Click (function (e) {
Alert ("I Am Li");
})
$ ("Div ul"). Click (function (e) {//This E is actually an event object
Alert ("I am ul");
E.stoppropagation (); E.stoppropagation (); Stop bubbling, if not write this, after the "I Am Li" pops up "I am ul", then will pop up "I am div". Add E.stoppropagation () here, and then, "I am div" will not pop out. Because it has been stopped. In fact, this sentence can also be replaced with return false
})
$ ("div"). Click (function (e) {
Alert ("I am div");
})
})
</script>
<div>
<ul>
<!--Li in UL, ul in the Div, as long as the click on the Li, that is, click on the UL, that is, click the Div. In the above function, the first "I Am Li" pops up and then pops up "I am ul", and finally pops up the "I am div" layer of bubbling, and the way to block bubbles is to invoke the object of the event to invoke the Stoppropagation () method. The object of this event is the function's argument e, the name of E can be easily
<li> Please click on my </li>
</ul>
</div>
</body>
Event Bubbling Usage Example for event object E in jquery (event bubbling and block bubbling)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
