A small example explains how to prevent Jquery events from bubbling

A small example explains how to prevent Jquery events from bubbling_jquery

WBOY

Release： 2016-05-16 16:41:42

Original

935 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 (Some browsers are window).

How to stop Jquery events from bubbling?

Explain with a small 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 事件冒泡</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('我是最外层');"> 
<div id="divTwo" onclick="alert('我是中间层！')"> 
<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('我是最里层！')">点击我</a> 
</div> 
</div> 
</form> 
</body> 
</html>

Copy after login

For example, the page above,
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 innermost a tag also has href attributes.

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
---->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 executed.
Event bubbling process (represented by tag ID): hr_three----> divTwo----> divOne. Bubbling 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>

Copy after login

Click "Click me" again, it 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>

Copy after login

Click "Click me" again, and a pop-up will appear: I am the innermost layer, but the link to the Baidu page will not be executed

It can be seen from this:

1.event.stopPropagation();

During event processing, event bubbling is prevented, but the default behavior is not blocked (it executes the jump of the hyperlink)

2.return false;

During event processing, event bubbling is prevented and default behavior is prevented (for example, it did not execute hyperlink jump just now)

There is another one related to bubbling:

3.event.preventDefault();

If you put it in the click event of the header A tag, click "Click me".
You will find that it pops up in sequence: I am the innermost layer---->I am the middle layer---->I am the outermost layer, but in the end it does not jump to Baidu

Its function is: during event processing, it does not block event bubbling, but blocks the default behavior (it only executes all pop-up boxes, but does not execute hyperlink jumps)