JS阻止事件冒泡的方法详解


Posted in Javascript onAugust 26, 2019
<%@ 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" 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>

比如上面这个页面,

分为三层: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事件中,点击“点击我”。

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

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

以上就是本次介绍的全部知识点内容,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Mootools 1.2教程 Tooltips
Sep 15 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
JS实现简单的点赞与踩功能示例
Dec 05 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 Javascript
原生js实现弹幕效果
Nov 29 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
express框架中使用jwt实现验证的方法
Aug 25 #Javascript
JS异步处理的进化史深入讲解
Aug 25 #Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 #Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 #Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 #Javascript
angularjs自定义过滤器demo示例
Aug 24 #Javascript
Jquery实现获取子元素的方法分析
Aug 24 #jQuery
You might like
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
PHP时间类完整代码实例
2021/02/26 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
清除输入框内的空格
2016/12/21 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
旧时光糖果:Old Time Candy
2018/02/05 全球购物
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
大学本科毕业生求职信范文
2013/12/18 职场文书
学校采购员岗位职责
2014/01/02 职场文书
先进事迹演讲稿
2014/09/01 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL