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 相关文章推荐
5款Javascript颜色选择器
Oct 25 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 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的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
JavaScript全局函数使用简单说明
2011/03/11 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
vue如何截取字符串
2019/05/06 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
Java模拟试题
2014/11/10 面试题
高中生物教学反思
2014/02/05 职场文书
分公司任命书
2014/06/06 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
学校国庆节活动总结
2015/03/23 职场文书
2015年公务员工作总结
2015/04/24 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
python中opencv实现图片文本倾斜校正
2021/06/11 Python
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python