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生成asp.net服务器控件的代码
Feb 04 Javascript
javascript 循环读取JSON数据的代码
Jul 17 Javascript
Js获取事件对象代码
Aug 05 Javascript
JS图像无缝滚动脚本非常好用
Feb 10 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 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
PHP 替换模板变量实现步骤
2009/08/24 PHP
Smarty保留变量用法分析
2016/05/23 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
Python网络爬虫实例讲解
2016/04/28 Python
Django返回json数据用法示例
2016/09/18 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
pandas 层次化索引的实现方法
2019/07/06 Python
python用for循环求和的方法总结
2019/07/08 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
高等教育专业自荐信范文
2014/03/26 职场文书
OpenCV-Python实现油画效果的实例
2021/06/08 Python
redis 解决库存并发问题实现数量控制
2022/04/08 Redis