JS how to stop the event bubbling

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs"Inherits="Default5"%>

<!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>title</Porschev --- Jquery event bubbling>

<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" mce_href= "http://www.baidu.com" onclick = "Alert ( 'I am the innermost layer!')" > click me </ A > 
　　　　　　</ div > 
　　　　</ div > 
　　</ form > 
</ body > 
</ HTML >

For example, the above page,

Is divided into three layers: divOne first outer layer, divTwo intermediate layer, hr_three is the innermost layer;

They have their own click event, the innermost layer of the label as well as a href attribute.

Run page, click on the "Click me", in turn pops up: I am the innermost ----> I am a middle layer ----> I am the outermost

----> and then link to Baidu.

This is the event bubble, I had only to click on the ID label hr_three, but indeed performed three alert operation.

Event bubbling process (indicated by the tag ID): hr_three ----> divTwo ----> divOne. Bubbling from the innermost layer to the outermost layer.

How to stop?

1.event.stopPropagation();

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

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

2.return false;

If the head is adding the following code

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

Then click on "Click me", will pop up: I am the innermost layer, but does not perform the link to Baidu page

It can be seen:

1.event.stopPropagation();

Event processing, to prevent the event from bubbling, but does not check the default behavior (it performs a hyperlink jumps)

2.return false;

Event processing, to prevent the event from bubbling, also prevents the default behavior (such as it just did not execute a hyperlink jumps)

There is a kind of bubble-related:

3.event.preventDefault();

If you put it on the head A click event tag, click on the "Click me."

Will find it in turn pops up: I am the innermost ----> I am a middle layer ----> I is the outermost layer, but in the end did not jump to Baidu

Its role is: Event processing, without blocking event bubbling, but check the default behavior (it only performs all bomb box, but did not perform the hyperlink jumps)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs"Inherits="Default5"%>

<!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>title</Porschev --- Jquery event bubbling>

<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" mce_href= "http://www.baidu.com" onclick = "Alert ( 'I am the innermost layer!')" > click me </ A > 
　　　　　　</ div > 
　　　　</ div > 
　　</ form > 
</ body > 
</ HTML >

For example, the above page,

Is divided into three layers: divOne first outer layer, divTwo intermediate layer, hr_three is the innermost layer;

They have their own click event, the innermost layer of the label as well as a href attribute.

Run page, click on the "Click me", in turn pops up: I am the innermost ----> I am a middle layer ----> I am the outermost

----> and then link to Baidu.

This is the event bubble, I had only to click on the ID label hr_three, but indeed performed three alert operation.

Event bubbling process (indicated by the tag ID): hr_three ----> divTwo ----> divOne. Bubbling from the innermost layer to the outermost layer.

How to stop?

1.event.stopPropagation();

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

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

2.return false;

If the head is adding the following code

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

Then click on "Click me", will pop up: I am the innermost layer, but does not perform the link to Baidu page

It can be seen:

1.event.stopPropagation();

Event processing, to prevent the event from bubbling, but does not check the default behavior (it performs a hyperlink jumps)

2.return false;

Event processing, to prevent the event from bubbling, also prevents the default behavior (such as it just did not execute a hyperlink jumps)

There is a kind of bubble-related:

3.event.preventDefault();

If you put it on the head A click event tag, click on the "Click me."

Will find it in turn pops up: I am the innermost ----> I am a middle layer ----> I is the outermost layer, but in the end did not jump to Baidu

Its role is: Event processing, without blocking event bubbling, but check the default behavior (it only performs all bomb box, but did not perform the hyperlink jumps)

JS how to stop the event bubbling

Guess you like