Of Stack

A small example explains how to prevent Jquery events from bubbling

  • 2020-03-30 03:34:29
  • OfStack

What is a JS event bubble?

Trigger certain types of events in an object (such as click onclick event), if the object defines a handler for this event, this event will call the handler, if does not define the event handler returns true or event, this event is transmitted to the object's parent object, from the inside out, until it is processed (parent object all similar events will be activated), or it reached the top of the object hierarchy, the document object is (some browser Windows).

How to prevent Jquery events from bubbling?

Let me give you a little example 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>Porschev---Jquery  The event bubbling </title> 

<script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script> 

</head> 
<body> 
<form id="form1" runat="server"> 
<div id="divOne" onclick="alert(' I'm the outermost layer ');"> 
<div id="divTwo" onclick="alert(' I'm the middle! ')"> 
<a id="hr_three" href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" mce_href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" onclick="alert(' I am the innermost! ')"> Click on the I </a> 
</div> 
</div> 
</form> 
</body> 
</html>


Like this page up here,
There are three layers: divOne is the outer layer, divTwo is the middle layer, hr_three is the innermost layer;
They all have their own click events, the innermost a tag, and the href attribute.

Run the page, click "click me", will pop up in turn: I am the innermost layer -> I'm the middle tier --> I'm the outermost layer
- > Then link to baidu.

This is the event bubbling. I was just clicking on the tag with ID hr_three, but I did perform three alert actions.
Event bubbling process (represented by tag ID) : hr_three-- > DivTwo - > DivOne. It bubbles from the innermost layer to the outermost layer.

How to stop it ?

1. Event. StopPropagation (); 


<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
event.stopPropagation();
});
});
<script>

Then click "click me", will pop up: I am the innermost layer, and then link to baidu

2. Return false;

If the following code is added to the header 


<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
return false;
});
});
<script>


Then click "click me", will pop up: I am the innermost layer, but will not execute the link to baidu page

It can be seen that:

1. Event. StopPropagation ();

During event handling, the event is stopped from bubbling, but the default behavior is not blocked (it performs a hyperlink jump)

2. Return false;

During event handling, it prevents the event from bubbling, and it also prevents the default behavior (like it didn't perform a hyperlink jump just now).

There's another one that has to do with bubbling:

3. The event. The preventDefault ();

If you put it in the click event of the header A tag, click "click me".
I'm the innermost --> I'm the middle tier --> I am the outermost layer, but did not jump to baidu in the end

It does not block event bubbles during event processing, but blocks default behavior (it only performs all pop-ups, but not hyperlink jumps)

Related articles: