JS如何阻止事件冒泡
<%@ 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如何阻止事件冒泡的更多相关文章
- js之阻止事件冒泡(待修改)和阻止默认事件
阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- JS如果阻止事件冒泡和浏览器默认事件
原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...
- js中阻止事件冒泡和浏览器默认行为
在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] ...
- JS 之 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别
在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...
- js 自定义阻止事件冒泡函数
// 以下改方法全兼容Chrome function stopBubble(event){ if(event.stopPropagation){ // 兼容火狐(firebox) event.st ...
- JS阻止事件冒泡
在使用JS事件的时候,外层元素事件有可能被里层元素的事件触发,例如点击里层元素外层也触发了点击,这种现象称为事件冒泡.(李昌辉) <div id="wai"> < ...
- js阻止冒泡及jquery阻止事件冒泡示例介绍
js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...
- js区分鼠标单双击 阻止事件冒泡
function clickOrDblClick(obj) { count++; if (obj != undefined) { var rowStr = $.trim($(obj).find(&qu ...
- JS中点击事件冒泡阻止
JS中点击事件冒泡阻止 解析: 一个div层'out',内含有一个div层'in'.如下: 两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件. 但是 ...
随机推荐
- NET com组件注册
1.签名 右击项目->属性->[签名]标签, 选中[为程序集签名]–>[选择强名称密钥文件]–>[新建],输入你的密钥名称,去掉[使用密码保护密钥文件] 最重要的签名,并且注册 ...
- Bugku-CTF加密篇之凯撒部长的奖励（就在8月，超师傅出色地完成了上级的特遣任务，凯撒部长准备给超师傅一份特殊的奖励.......）
凯撒部长的奖励 就在8月,超师傅出色地完成了上级的特遣任务,凯撒部长准备给超师傅一份特殊的奖励,兴高采烈的超师傅却只收到一长串莫名的密文,超师傅看到英语字串便满脸黑线,帮他拿到这份价值不菲的奖励吧. ...
- 连接(JOIN)
join 用于把来自两个或多个表的行结合起来,基于这些表之间的共同字段. INNER JOIN 从多个表中返回满足 JOIN 条件的所有行. INNER JOIN:如果表中有至少一个匹配,则返回行 L ...
- [C/C++] _tprintf() 输出不了汉字
在前面加一个 setlocale(LC_ALL, ""); //必须得有这行 否则不能输出中文 注意得加locale头文件 #include<stdio.h> #inc ...
- 【转】docker配置参数详解---/etc/docker/daemon.json完整参数
docker-daemon.json各配置详解 { “api-cors-header”:"", ——————在引擎API中设置CORS标头 “authorization-plugi ...
- lc 0227
目录 ✅ 1189. "气球" 的最大数量 描述 解答 cpp py improved py ✅ 784. 字母大小写全排列 描述 解答 c: backTrace !! power ...
- python学习之网路操作
socket:服务器与客户端的常规操作,但默认创建的的sever.socket是阻塞式,不支持多个客户端的连接,要想连接多个客户端需要引入多线程.但对于IO类型来说大部分时间其实都在IO上与创建多个线 ...
- 搭建第一个django项目
django是python做web最为强大和全能的后端框架,不会django的python如一条咸鱼... 所以开始学习django框架. 首选得在python中下载django 下载命令: pip ...
- Tarjan's algorithm
Tarjan算法可以用来求有向图的强连通分量个数,之前十分粗略的写了Kosaraju算法,这里打算比较认真的分析一下Tarjan算法,然后给出算法实现代码. Tarjan算法的主要算法部分也是dfs( ...
- js中ES6的Set的基本用法
ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. const s = new Set(); [2,3,5,4,5,2,2].forEach(x => s. ...