<%@ 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>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" mce_href="http://www.baidu.com"onclick="alert('我是最里层！')">点击我</a>

　　　　　　</div>

　　　　</div>

　　</form>

</body>

</html>

比如上面这个页面，

分为三层：divOne是第外层，divTwo中间层，hr_three是最里层;

他们都有各自的click事件，最里层a标签还有href属性。

运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层

---->然后再链接到百度.

这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。

事件冒泡过程（以标签ID表示）：hr_three----> divTwo----> divOne 。从最里层冒泡到最外层。

如何来阻止?

1.event.stopPropagation();

 <script type="text/javascript">

        $(function() {

            $("#hr_three").click(function(event) {

                event.stopPropagation();

            });

        });

<script>

再点击“点击我”，会弹出：我是最里层，然后链接到百度

2.return false;

如果头部加入的是以下代码

<script type="text/javascript">

$(function() {

　　$("#hr_three").click(function(event) {

　　　　return false;

　　});

});

<script>

再点击“点击我”，会弹出：我是最里层，但不会执行链接到百度页面

由此可以看出：

1.event.stopPropagation();

事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）

2.return false;

事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）

还有一种有冒泡有关的：

3.event.preventDefault();

如果把它放在头部A标签的click事件中，点击“点击我”。

会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度

它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

JS如何阻止事件冒泡的更多相关文章

  1. js之阻止事件冒泡(待修改)和阻止默认事件

    阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  2. JS如果阻止事件冒泡和浏览器默认事件

    原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...

  3. js中阻止事件冒泡和浏览器默认行为

    在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] ...

  4. JS 之 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别

    在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...

  5. js 自定义阻止事件冒泡函数

    // 以下改方法全兼容Chrome function stopBubble(event){ if(event.stopPropagation){   // 兼容火狐(firebox) event.st ...

  6. JS阻止事件冒泡

    在使用JS事件的时候,外层元素事件有可能被里层元素的事件触发,例如点击里层元素外层也触发了点击,这种现象称为事件冒泡.(李昌辉) <div id="wai"> < ...

  7. js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...

  8. js区分鼠标单双击 阻止事件冒泡

    function clickOrDblClick(obj) { count++; if (obj != undefined) { var rowStr = $.trim($(obj).find(&qu ...

  9. JS中点击事件冒泡阻止

    JS中点击事件冒泡阻止 解析: 一个div层'out',内含有一个div层'in'.如下: 两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件. 但是 ...

随机推荐

  1. 题解 P1283 【平板涂色】

    P1283 平板涂色 数据范围也太小了qwq..适合本萌新暴搜 小小的剪枝: 1.用pre预处理出每块矩形上方的矩形,pre[i][0]记录数目(如果数据范围再开大一点,直接1~n枚举判断可能超时qw ...

  2. opencv python：轮廓发现

    example import cv2 as cv import numpy as np def edge_demo(image): blurred = cv.GaussianBlur(image, ( ...

  3. The Preliminary Contest for ICPC Asia Xuzhou 2019 K. Center

    这题对于能加入最多边缘点的center点,这个点就是最优的center ,对于center点,总共是n^2的,顶多也就1e6,所以直接双重循环就行了, 然后map<pair,set >映射 ...

  4. 在 Fabric 中使用私有数据

    本教程将演示收集器(collection)的使用,收集器为区块链网络上已授权的组织节点 提供私有数据的存储和检索. 本教程假设您已了解私有数据的存储和他们的用例.更多的信息请参阅 私有数据 . 本教程 ...

  5. 新手指引，php什么是常量、变量、数组、类和对象及方法？

    众所周知,常量.变量.数组.类和对象及方法共同构成了PHP的基石.那么什么是常量?什么是变量?什么是数组?什么是类和对象及方法?我在此谈谈个人浅见,新手指引,高手勿喷. PHP 常量 定义:常量是单个 ...

  6. 洛谷 P1464 Function（简单记忆化）

    嗯... 让一切从水开始吧... 水过初赛,但愿复赛能够接着水过... 这道题不记忆化会tle,所以用空间换时间,将每次的答案(只有20*20*20个)存下来,如果之前已经求过,就不需要重复求了... ...

  7. SpringCloud全家桶学习之Feign负载均衡----Feign（四）

    一.Feign概述 (1)Feign是什么? 官网地址:https://projects.spring.io/spring-cloud/spring-cloud.html#spring-cloud-f ...

  8. jsp用equals判断两个字符串变量是否相等

    使用即可: s1.equals(s2) 如果使用场景: if(s1==s2){} 这样使用可能会出现判断无效的情况. 使用if(s1.equals(s2)){}就可以了.

  9. 今天启动项目的时候报了一个错MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk.

    从报错信息看应该是内存问题导致不能持久化到硬盘,在网上找到了一个解决方法: Redis被配置为保存数据库快照,但它目前不能持久化到硬盘.用来修改集合数据的命令不能用.请查看Redis日志的详细错误信息 ...

  10. centsos 7 删除自带jdk安装自定义jdk8

    甲骨文官网地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 如何清除自带j ...