jquery handles event bubbling

<div class= "foo" ><!--lang:html--><span class= "Bar" ><!--lang:html--><a href= "/http/ www.example.cm/"><!--lang:html--></a><!--lang:html--></span><!--lang:html-->& lt;p><!--lang:html--></p><!--lang:html--></div>

But we clicked on the <a>， three elements that were under the user's mouse pointer, and

element is irrelevant to this interaction.

Event capture is first handed to the outermost element, and then to a layer of

The other opposite strategy is that the most specific elements get a chance to respond before bubbling to more general elements.

The solution:

Example:

<div id= "Container" ><!--lang:html--  <div id= "switcher" ><!--lang:html-
 
1. Event Target
 
$ (' #switcher '). Click (Function (event) {
if (Event.target = = this) {
$ (' #switcher. Button '). Toggleclass (' hidden ');
}
})
 
Make sure that the element you clicked is
, not the outside element
 
2, the following method, although in cross-browser can not be used safely, as long as the use of jquery to register all events can be used with confidence.
$ (document). Ready (function () {
$ (' #switcher. Button '). Click (Function (event) {
 
$ (' body '). Removeclass (); if (this.id = = ' Switcher-narrow ') {  $ (' body '). addclass (' narrow ');} else if (this.id = = ' Switcher-large ') {  $ (' Body '). addclass (' large '); }
 
$ (' #switcher. Button '). Removeclass (' selected ');
 
$ (this). AddClass (' selected '); Event.stoppropagation ();   Avoid all other DOM elements in response to this event, so that the clicked event will only be handled by the button.
 
});
});
 
The default is bubbling, if cancel bubbling can take:
Cancelbubble=true
or jquery's event.stoppropagation ();
 
jquery handles event bubbling