Community Learn Tools Library Leisure

English

Home > Web Front-end > JS Tutorial > Introduction to jquery event bubbling and how to prevent event bubbling_jquery

Introduction to jquery event bubbling and how to prevent event bubbling_jquery

WBOY

Release： 2016-05-16 17:45:41

Original

911 people have browsed it

What is JS event bubbling?
Trigger a certain type of event (such as an onclick event) on an object. If the object defines a handler for this event, then this event will call this handler. If this event handler is not defined, Or the event returns true, then this event will propagate to the parent object of this object, from inside to outside, until it is processed (all similar events of the parent object will be activated), or it reaches the top level of the object hierarchy, That is, the document object (window in some browsers).

How to stop Jquery events from bubbling?
Explained through a small example

Copy the code The code is as follows:

 
 <%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default5.aspx.cs"Inherits="Default5"%> 
 
Porschev---Jquery event bubbling 
 
Click me

For example, in the above page,
is divided into three layers: divOne is the outer layer, divTwo is the middle layer, and hr_three is the innermost layer;
They all have their own click events, and the most The inner a tag also has a href attribute.
Run the page, click "Click me", and it will pop up in sequence: I am the innermost layer---->I am the middle layer---->I am the outermost layer---->and then Link to Baidu.
This is event bubbling. Originally, I only clicked on the label with the ID hr_three, but three alert operations were indeed executed.
Event bubbling process (indicated by tag ID): hr_three---->divTwo---->divOne. Bubbling from the innermost layer to the outermost layer.

How to stop?
1.event.stopPropagation();

Copy code The code is as follows:

$(function(){
$("#hr_three").click(function( event){
event.stopPropagation();
});
});