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 相关文章推荐
checkbox 多选框 联动实现代码
Oct 22 Javascript
传智播客学习之java 反射
Nov 22 Javascript
js/jQuery对象互转(快速操作dom元素)
Feb 04 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
php控制文件下载速度的方法
2015/03/24 PHP
smarty简单应用实例
2015/11/03 PHP
PHP实现小偷程序实例
2016/10/31 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
Python是编译运行的验证方法
2015/01/30 Python
python中pass语句用法实例分析
2015/04/30 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
基于python绘制科赫雪花
2018/06/22 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
Python变量类型知识点总结
2019/02/18 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
北大自主招生自荐信
2013/10/19 职场文书
视光学专业毕业生推荐信
2013/10/28 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
财务整改报告范文
2014/11/05 职场文书
兵马俑导游词
2015/02/02 职场文书