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 相关文章推荐
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
一行代码告别document.getElementById
Jun 01 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
Element Input组件分析小结
Oct 11 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
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
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
php PDO异常处理详解
2016/11/20 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
js初始化验证实例详解
2016/11/26 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
Django中处理出错页面的方法
2015/07/15 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
python生成带有表格的图片实例
2019/02/03 Python
python and or用法详解
2019/06/26 Python
pymysql 开启调试模式的实现
2019/09/24 Python
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
介绍一下#error预处理
2015/09/25 面试题
学雷锋标兵事迹材料
2014/08/18 职场文书
事业单位年度考核评语
2014/12/31 职场文书
学习与创新自我评价
2015/03/09 职场文书
2015年工程部工作总结
2015/04/30 职场文书
企业百日安全活动总结
2015/05/07 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL
灵能百分百第三季什么时候来?
2022/03/15 日漫