js阻止事件冒泡

2023-10-31

js阻止事件冒泡

<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" mce_href="http://www.baidu.com"onclick="alert('我是最里层!')">点击我</a>
      </div>
    </div>
  </form>
</body>

比如上面这个页面,

分为三层: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事件中,点击“点击我”。

会发现它依次弹出:我是最里层---->我是中间层---->我是最外层,但最后却没有跳转到百度

它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js阻止事件冒泡 的相关文章

随机推荐

  • 【开发工具集】Process Explorer——进程资源管理器

    进程资源管理器 特性 Process Explorer 是 Sysinternals 出品的工具 其在功能方面的独特之处有以下几点 显示进程安全令牌 比如安全组列表 特权 以及虚拟化状态 加亮显示进程和线程列表中的变化 列出服务宿主进程中的
  • vue_cli的vue.config.js文件常用配置

    vue cli的vue config js文件 vue config js文件常用配置 vue config js文件常用配置 module exports 手机端访问 devServer disableHostCheck false 安装
  • 父子组件通信

    父子组件通信 父子之间数据的传递 根组件data传子组件 当子组件props里的对象名有大写时出现的问题 props驼峰标识 子组件传父组件 父子之间的访问 父组件访问子组件的内容 父子之间数据的传递 根组件data传子组件 在子组件使用p
  • k8s容忍度和污点(固定只运行某个服务)

    Taints污点的组成 使用kubectl taint命令可以给某个Node节点设置污点 Node被设置污点之后就和Pod之间存在一种相斥的关系 可以让Node拒绝Pod的调度执行 甚至将Node上已经存在的Pod驱逐出去 每个污点的组成如
  • [蓝桥杯] 方格填数 (Python 实现)

    题目 代码 import itertools a x for x in range 10 b list itertools permutations a 10 def check nums def jduge y x move 1 0 1
  • SpringBoot 升级内嵌Tomcat

    SpringBoot 更新 Tomcat 最近公司的一个老项目需要升级下Tomcat 由于这个项目我完全没有参与 所以一开始我以为是一个老的Tomcat项目 升级它的Tomcat依赖或者是Tomcat容器镜像 后面发现是一个SpringBo
  • .net应用程序和工具

    1 1 从 NET Framework 到 NET Core 再到 NET net的第一个版本发布于2002年 从那之后 net发生了很多变化 net的第一个时代是 net framework的时代 它为Windows桌面开发提供了Wind
  • 多个Ajax请求成功后再执行后续方法

    经常会遇到需要ajax请求完毕后调用某方法 这次是多个ajax请求成功后 用它们返回的数据传参给回调方法 查询了一下 可以用jquery中的 when 使用方法如下 when ajax ajax ajax done function a1
  • centos6安装jenkins配置及使用

    本文的安装步骤说明环境为 centos6 9操作系统 jenkins2 138 安装jenkins 下载rpm文件 下载地址 https pkg jenkins io redhat 该说明中使用的是jenkins 2 138 1 1 noa
  • typora 快速复制excel到typora

    思想是把表格转换成html格式 复制到typora中 然后点击右上角 红色框的html 点击对号 就可以切换到表格了 有免费在线的切换工具 参考 http pressbin com tools excel to html table ind
  • 小孩子有没有学机器人编程的必要

    小孩子有没有学机器人编程的必要 对于很多的家长们来说 孩子的学习一直都是他们十分关心和重视的一件事情 很多的家长在培养孩子的学习方面也可以说是十分的用心的 他们会给孩子选择一些能够提升孩子能力的课程 就拿现在很多的家长想要孩子去学习机器人编
  • 在python中使用最小二乘法画出拟合曲线_基于jupyter notebook的python编程-----运用最小二乘法,导入文件数据模拟一元线性回归分析...

    基于jupyter notebook的python编程 运用最小二乘法 导入文件数据模拟一元线性回归分析 用最小二乘法模拟一元线性回去曲线的目录 一 运行jupyter notebook 搭建python环境 1 打开Windows终端命令
  • 预防死锁的3种方法

    1 采用资源的静态预分配策略 破坏 部分分配 条件 2 允许进程剥夺使用其他进程占用的资源破坏 不可剥夺 条件 3 采用资源有序分配法 破坏 环路 条件
  • 2022黑马SpringBoot跟学笔记(二)

    2022黑马SpringBoot跟学笔记 二 2 4 多环境配置 2 4 1 yaml文件 2 4 2 properties文件 2 4 3 命令行启动参数设置 2 4 4多环境开发控制 2 5 配置文件分类 2 5 1 代码演示 2 5
  • 谨防商家套路——一定要一样一样功能问好自己所要的功能——常年购物都被打了眼【伸手党避坑】

    本人淘宝购物十几年了 从淘宝刚出来不久就开始 自从PDD购物被骗后 觉得自己辨别商家套路能力有限 所以转战淘宝 很遗憾的是 在taobao也会有这种误导消费者的商家 常用的商家套路咱们就不说了 明眼都能看出来 但是利用惯性思维给人下套的 我
  • vue3内置组件(Teleport组件,Fragment组件)-传送组件,减少层级

    一 传送组件 Teleport组件 可将组件移动到 DOM 中 Vue app 之外的其他位置 主要是为了解决一些特殊场景下模态对话框组件 组件的渲染 例子 模拟UI框架对话框组件 App vue
  • leetcode-每日一道算法题

    字符串转换整数 atoi 请你来实现一个 myAtoi string s 函数 使其能将字符串转换成一个 32 位有符号整数 类似 C C 中的 atoi 函数 函数 myAtoi string s 的算法如下 读入字符串并丢弃无用的前导空
  • 韩信点兵问题,鸡兔同笼问题,闰年判断问题等,我用Python瞬间搞定(13)

    小朋友们好 大朋友们好 我是猫妹 一名爱上Python编程的小学生 欢迎和猫妹一起 趣味学Python 今日主题 最近猫妹一直在练习Python编程 有些习题真是经典啊 比如韩信点兵问题 比如鸡兔同笼问题等 这些问题 第一次遇到 真是没有思
  • 第0章-JDK的安装与配置

    JDK 8 的安装与配置 本系列文章参考了尚硅谷的课件文档及其他同学的学习笔记 1 安装 1 1 打开网页下载 https www oracle com 下载对应平台的合适的 JDK 版本 1 2 开始安装 双击下载的 exe 如 jdk
  • js阻止事件冒泡

    js阻止事件冒泡