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 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
Mar 28 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
微信小程序 UI与容器组件总结
Feb 21 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
JavaScript:ES2019 的新特性(译)
Aug 08 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
JavaScript经典案例之简易计算器
Aug 24 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数据缓存技术
2007/02/14 PHP
destoon常用的安全设置概述
2014/06/21 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
为jQuery增加join方法的实现代码
2010/11/28 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
Django中的session用法详解
2020/03/09 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
电气专业应届生求职信
2013/11/01 职场文书
家庭教育先进个人事迹材料
2014/01/24 职场文书
三方协议书范本
2014/04/22 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
故意伤害辩护词
2015/05/21 职场文书
2015国庆节感想
2015/08/04 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers