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. XML解析之Jsoup

    操作xml文件 解析(读取):将文档中的数据解读到内存中 写入:将内存中的数据保存到XML文档中.持久化的存储 解析xml的方式 DOM:将标记语言文档一次性加载进内存,在内存中形成一颗dom树 优点 ...

  2. element 动态合并表格

    前言 element 官方的例子太简单了,不满足实际的需求 数据肯定是动态的,合并的行数,列数都是动态的,该如何知道每一行的合并数呢 需求 动态合并表格,数据来源于数据库 正文 一开始,我的数据源是单 ...

  3. 浅析ORACLE中NVL/NVL2/DECODE/CASE WHEN的用法

    使用NVL的时候只能对值进行是否为空的判断,基本语法是NVL( 值1, ,结果2).它的功能是如果值1为空,则此函数返回结果2,不为空的话直接输出值1(如果两个参数都为空,那么还是返回空): NVL2 ...

  4. nyoj 39-水仙花数

    39-水仙花数 内存限制:64MB 时间限制:1000ms Special Judge: No accepted:35 submit:70 题目描述: 请判断一个数是不是水仙花数. 其中水仙花数定义各 ...

  5. centos安装后第一次重启,许可协议、Kdump

    1.许可协议,服务器键盘操作找到许可 确定(遇到过,第一次懵逼了) 2.Kdump是RHEL提供的一个崩溃转储功能,用于在系统发生故障时提供分析数据,它会占用系统内存,一般选择关闭(默认是关闭)(这个 ...

  6. MySQL索引长度限制

    索引 TextField是不支持建立索引的 MySQL对索引字段长度有限制 innodb引擎的每个索引列长度限制为767字节(bytes),所有组成索引列的长度和不能大于3072字节 myisam引擎 ...

  7. Swoft 源码剖析 - Swoole和Swoft的那些事 (Http/Rpc服务篇)

    前言 Swoft在PHPer圈中是一个门槛较高的Web框架,不仅仅由于框架本身带来了很多新概念和前沿的设计,还在于Swoft是一个基于Swoole的框架.Swoole在PHPer圈内学习成本最高的工具 ...

  8. C++学习第二天(打卡)

    C++ new 可以很方便的 分配一段内存. 比如 int *test= new int ; int n; cin>>n; int * test =new int [n]; 可以实现动态分 ...

  9. 【论文阅读】Learning Dual Convolutional Neural Networks for Low-Level Vision

    论文阅读([CVPR2018]Jinshan Pan - Learning Dual Convolutional Neural Networks for Low-Level Vision) 本文针对低 ...

  10. linux 内核版本和发行版本区别

    内核版本:我的理解是,内核是系统的心脏,是linux中最基层的代码.版本号如 Linux version 3.10.0-514.el7.x86_64 查看内核版本可使用.uname -a 或者cat ...