1. 事件

两种类型的事件:触发式、冒泡式

2. 冒泡式

触发式:事件从DOM结构的顶层往下走的事件触发过程;

冒泡式:事件从DOM结构的底层往上走的事件触发过程。

3. 父子节点

当父、子节点同时对一个事件进行监听的时候,冒泡式的事件方式中,发生在子节点中的事件,在完成子节点事件处理函数后,将继续执行父节点注册的事件处理函数。

  • 父、子节点都对某事件进行了监听,比如:父节点监听了onclick,子节点也监听了onclick事件
  • 发生在子节点上的事件,子节点事件处理函数将优先被调用
  • 如果只发生在父节点上,则与子节点没有关系
  • 子节点上的事件执行完成之后,父节点事件处理函数接下来被调用

4. 取消事件传递

在子节点事件处理函数中,通过调用事件处理函数参数:event.stopPropagation()函数,来阻止事件的冒泡行为。

  • 事件处理函数,接收一个参数,即event事件对象,event = event || window.event,然后调用event.stopPropagation()。

5. 使用场景

蒙版div作为父元素,蒙版div的子元素作为内容的呈现区域,当点击内容呈现区域之外时,能够关闭蒙版,但是点击内容程序区域则不会触发蒙版的关闭,此时通过在内容程序区域(子div节点)给Onclick事件处理函数中,使用event.stopPropagation()函数来阻止:点击此内容呈现区域导致的蒙版关闭行为。

[TimLinux] JavaScript 阻止父节点接收子节点事件的方法的更多相关文章

  1. JavaScript中,有三种常用的绑定事件的方法

    要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的 ...

  2. [TimLinux] JavaScript 给表单提前之前进行验证的方法

    1. onSubmit事件 这个事件是注册到form表单上的,不是注册在input type="submit"这个input按钮上面的. 2. 注册方式 HTML内部注册:< ...

  3. JavaScript绑定事件的方法[3种]

    在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HT ...

  4. 总结获取原生JS(javascript)的父节点、子节点、兄弟节点

    关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码 获取父节点 及 父节点下所有子节点(兄弟节点) <ul> <l ...

  5. JavaScript通过父节点ID递归生成JSON树

    JavaScript通过父节点ID递归生成JSON树: · 实现思路:通过递归实现(第一次递归的时候查询出所有的父节点,然后通过当前父节点id不断地去查询所有子节点,直到递归完毕返回)   · 代码示 ...

  6. jQuery之防止冒泡事件,冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 ...

  7. JavaScript的DOM编程--10--删除节点

    1). removeChild(): 从一个给定元素里删除一个子节点 var reference = element.removeChild(node); 返回值是一个指向已被删除的子节点的引用指针. ...

  8. JavaScript HTML DOM 元素操作(节点)

      在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点 ...

  9. (转载)Javascript removeChild()不能删除全部子节点的解决办法

    在Javascript中,只提供了一种删除节点的方法:removeChild().removeChild() 方法用来删除父节点的一个子节点. 语法: parent.removeChild(thisN ...

随机推荐

  1. Java自学基础、进阶、项目实战网站推荐

    推荐一个自学的好平台,有Java基础,前端,后端,基础的内容都有讲解,还有框架的讲解和实战项目,特别适合自学 JAVA 自学网站 JAVA 练习题 Spring 教程 Mybatis 教程 Sprin ...

  2. 深入理解计算机系统 第八章 异常控制流 part1

    本章主旨 第八章的目的是阐述清楚应用程序是如何与操作系统交互的(之前章节的学习是阐述应用程序是如何与硬件交互的) 异常控制流 异常控制流,即 ECF(exceptional contril flow) ...

  3. Electron 菜单切换主题与css替换 ts编写

    ////目标css<link rel="stylesheet" id="theme_css" href="路径"> ////ts ...

  4. 关于Prometheus监控的思考:多标签埋点及Mbean

    使用 grafana+prometheus+jmx 作为普通的监控手段,是比较有用的.我之前的文章介绍了相应的实现办法. 但是,按照之前的实现,我们更多的只能是监控 单值型的数据,如请求量,tps 等 ...

  5. Cache地址映射

    原理:程序访问局部性         在较短时间内由程序产生的地址往往集中在存储器逻辑地址空间的很小范围内         时间:在一小段时间内,最近被访问过的程序和数据很可能再次被访问       ...

  6. 从0开始学前端(笔记备份)----HTML部分 Day1 HTML标签

  7. WPS Office 2012专业版与WPS2019政府云办公增强版下载安装与体验

    WPS Office 2012专业版与WPS2019政府云办公增强版下载安装与体验 一.WPS Office 2012专业版. 优点:没有广告,很清爽,界面很人性化.是我于2019年11月找出来安装测 ...

  8. .NET Core 3.0中用 Code-First 方式创建 gRPC 服务与客户端

    .NET Core love gRPC 千呼万唤的 .NET Core 3.0 终于在 9 月份正式发布,在它的众多新特性中,除了性能得到了大大提高,比较受关注的应该是 ASP.NET Core 3. ...

  9. 稀疏数组 python描述

    什么是稀疏矩阵? 在矩阵中,若数值为0的元素数目远远多于非0元素的数目,并且非0元素分布没有规律时,则称该矩阵为稀疏矩阵. 作用: 在这种情况下,很多0值无疑是很浪费空间的,当我们要把数组存储在磁盘中 ...

  10. python_day03

    今日所学内容 1.函数部分: #函数的三种定义方式#1.无参函数:不需要外部传入的参数#2.有参函数:需要接受外部传入的参数#3.空函数:def func(): pass#pass代表说明都不用做# ...