Introduction to the method of blocking bubbling events in jquery _jquery

A brief introduction of bubbling events

When we click on a control, if the parent control that contains the control also has a click event, it continues to execute.
For example: Div under a have click event, click A, will alert appear 2 times. This phenomenon is called bubbling event.

This event bubbles from the original element to the top of the DOM tree.
Target element: The target element of any event is the first element, in our case, the button,
And it appears as a property in our element object. With the event agent, we can add the event handler to an element,
Waiting for an event to bubble up from its child elements, and it's easy to know which element the event starts with.
Attention:
Blur, focus, load, and unload cannot bubble like other events. In fact, blur and focus can be obtained using event capture rather than event bubbling (in browsers other than IE).

Second, to prevent the jquery event bubbling

jquery has a bubbling feature for event firings of the DOM. Sometimes this feature can be used to reduce repetitive code, but sometimes we don't want the event to bubble. This is the time to stop jquery.event bubbling.

At the beginning of the Jquery.event document, the Jquery.event object is an event object that conforms to the standards of the consortium, and Jquery.event eliminates the step of checking for compatible ie.
Jquery.event provides a very simple way to prevent event bubbling: event.stoppropagation ();

Copy Code code as follows:

$ ("P"). Click (Function (event) {
Event.stoppropagation ();
Do something
})

But this method has no effect on events that use live bindings and requires a simpler way to block event bubbling: return false;

Copy Code code as follows:

$ (this). After ("Another paragraph!");

return false; });

Terminating bubbling functions compatible with multiple browsers:

Copy Code code as follows:

function Stopdefault (e) {
Block default browser actions (the Web-consortium)
if (e && e.preventdefault)
E.preventdefault ();
How to block the default action of a function in IE
Else
Window.event.returnValue = false;
return false;
}

Iii. using the Event.tatget property to explicitly event objects

The event object is stored in the event handler. The Event.tatget property holds the target element in which the event occurred. This attribute is specified in the DOM API, but is not implemented by all browsers. jquery makes the necessary extensions to this event object to be able to use this property in any browser. With. Target, you can determine the element in the DOM that receives the event first. Also, we know that this refers to the DOM element that handles the event.

Using the Event.tatget property to explicitly event objects

The code to block event bubbling is as follows:

Copy Code code as follows:

$ (document). Ready (function () {
$ (' switcher '). Click (Function (event) {
if (Event.target = = this)
{
$ (' Switcher. Button '). Toggleclass (' hidden ');
}
};)
});