Home > Developer > Web Develop
Suppose there are two elements on the page, one of which is nested within another element, and all are bound to the click event, and the Click event is also bound on the body Element.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title></title></Head><Body><DivID= "content">Outer DIV Element<span>Inner SPAN element</span>Outer DIV Element</Div><DivID= "msg"></Div><Scriptsrc=".. /.. /vender/jquery-1.11.3/jquery-1.11.3.js "></Script><Scripttype= "text/javascript"> $(function () { $('span'). Click (function(e) {vartxt= $('#msg'). HTML ()+"<p> inner SPAN element click </p>"; $('#msg'). HTML (txt); }); $('Div'). Click (function () { vartxt= $('#msg'). HTML ()+"<p> outer div element clicked </p>"; $('#msg'). HTML (txt); }); $('Body'). Click (function () { vartxt= $('#msg'). HTML ()+"<p>body Element Click </p>"; $('#msg'). HTML (txt); }) })</Script></Body></HTML>
When you click the internal span element, three records are output:
This phenomenon is caused by event Bubbling.
The Click event of an element bubbles in the following order:
Its order is the opposite of event Capture.
Stopping event bubbling prevents the event handlers of other objects in the event from being executed, and provides the Stoppropagation () method in JQuery to stop Bubbling.
$ (' span '). click (function (e) { var txt = $ (' #msg '). HTML () + "<p> inner span Element clicked </p>"; $ (' #msg '). HTML (txt); E.stoppropagation (); });Jquery[1]-event bubbling and blocking 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
