Introduction to methods for blocking bubble events in jQuery

1. Introduction to bubble events

When we click a control, if the parent control including the control also has a click event, the execution will continue.
For example, a under div has a click event. When you click a, alert appears twice. This phenomenon is called a bubble event.

This event has been bubbling from the original element to the top layer of the DOM tree.
Target element: the target element of any event is the first element. In our example, it is also a button,
And it appears as an attribute in our element object. With event proxy, we can add the event processor to an element,
Wait for an event to bubble up from its child element, and you can easily know which element the event starts.
Note:
Blur, focus, load, and unload cannot bubble like other events. In fact, blur and focus can be obtained by event capture rather than event bubbling (in browsers other than IE ).

Ii. Prevent jQuery event bubbling

JQuery has the bubble feature to trigger DOM events. Sometimes this feature can reduce repeated code, but sometimes we don't want event bubbling. In this case, jQuery. Event bubbles will be blocked.

At the beginning of the jQuery. Event document, we learned that the jQuery. Event object is an Event object that complies with W3C standards, and jQuery. Event removes the need to check for compatibility with IE.
JQuery. Event provides a very simple method to prevent event bubbles: Event. stopPropagation ();
Copy codeThe Code is as follows:
$ ("P"). click (function (event ){
Event. stopPropagation ();
// Do something
})

However, this method does not work for events bound to live. A simpler method is required to prevent event bubbles: return false;
Copy codeThe Code is as follows:
$ (This). after ("Another paragraph! ");

Return false ;});

Compatible with the termination bubble function of multiple browsers:
Copy codeThe Code is as follows:
Function stopDefault (e ){
// Block the default browser action (W3C)
If (e & e. preventDefault)
E. preventDefault ();
// Block the default action of the function in IE
Else
Window. event. returnValue = false;
Return false;
}

3. Use the event. tatget attribute to specify the event object

The variable event in the event handler stores the event object. The event. tatget attribute stores the target element of an event. This attribute is specified in the dom api but is not implemented by all browsers. JQuery makes necessary extensions to this event object so that this attribute can be used in any browser. Through .tar get, you can determine the elements of the event first received in the DOM. Furthermore, we know that this references the DOM elements used to process events.

Use the event. tatget attribute to specify the event object

The code to prevent event bubbles is as follows:
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ('Switcher '). click (function (event ){
If(event.tar get = this)
{
$ ('Switcher. click'). toggleClass ('hiddy ');
}
};)
});