jquery Time Bubbles

event bubbling : When an event on an element is triggered, such as a mouse click on a button, the same event will be triggered in all ancestor elements of that element. This process is known as event bubbling, which bubbles to the top of the DOM tree from the beginning of the original element. That is, when the nesting of multiple div is set up, that is, the parent-child relationship is established, when the parents Div joins the onclick event with the sub-Div, when the onclick event of the sub-div is triggered, the sub-Div makes the corresponding JS operation. But the OnClick event of the parent Div is also triggered. This creates multiple levels of concurrency for the event, resulting in page clutter. This is the bubbling event.

Ways to block JavaScript events from bubbling delivery:

1.event.stoppropagation ();

$ (document). Ready (function (){     $ (' div '). Click (Function (event) {        alert (' div ');     } );     $ (' P '). Click (Function (Event){        alert (' P ');     } );     $ (' span '). Click (Function (Event){        alert (' span ');        Event.stoppropagation ();     } ) });

<div>div Element
<p>paragraph element<br/>
<span>span element</span>
</p>
</div>

2.return (FALSE);

$ (document). Ready (function (){    $ (' div '). Click (Function (event) {        alert (' div ');    } );    $ (' P '). Click (Function (Event){        alert (' P ');    } );    $ (' span '). Click (Function (Event){        alert (' span ');        return (false);    } )}); <div>div Element    <p>paragraph element<br/>        <span>span Element</span >    </p></div>

Difference: return false not only prevents the event from bubbling up, but also blocks the event itself. Event.stoppropagation () Only blocks events from bubbling up, not blocking the event itself.

jquery Time Bubbles