2. 事件捕获 及 如何阻止冒泡
DOM事件流机制 / 事件捕获
什么是DOM?
DOM 是描述 HTML 的内部数据结构,它会将 Web 页面和 JavaScript 脚本连接起来, 并过滤一些不安全的内容;
HTML 解析器会把字节转换成DOM
一个事件在发生的时候会在子元素和父元素之间传播,这会分成三个阶段:
1. window 传到目标节点 ---- 捕获阶段(上层传到底层)
2. 目标节点触发 ---- 目标阶段
3. 目标节点传到window ---- 冒泡阶段(底层传到上层)
如何阻止冒泡?
1. event.stopPropagation()方法 阻止事件冒泡
$('.btn').click(function (even) {even.stopPropagation();alert('按钮被点击了');})
这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个链接,这个链接仍然会被打开。
例如:
<a href="https://www.csdn.net/" class="box"><button class="btn">按钮</button>
</a>
2. event.preventDefault()方法 阻止默认事件
$('.btn').click(function (even) {even.preventDefault();alert('按钮被点击了');})
这是阻止默认事件的方法,调用此方方法,链接不会被打开,但是会发生冒泡, 冒泡会传递到上一层的父元素;
3. return false;
$('.btn').click(function (even) {alert('按钮被点击了');return false;})
这个方法比较暴力, 他会同时阻止冒泡也会阻止默认事件; 写上这段代码, 链接不会被打开,事件也不会传递到上一层的u父元素; 类似于同时调用了event.stopPropagation()和event.preventDefault()
2. 事件捕获 及 如何阻止冒泡相关推荐
- 浅谈:事件冒泡、事件捕获,及阻止办法
1.事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. <div id="box1"><div id=&quo ...
- 页面内部DIV让点击外部DIV 事件不发生(阻止冒泡事件)
如标题的情况,经常发生,尤其是在一些弹出框上面之类的. <script>function zuzhimaopao(){e.stopPropagation();} </script&g ...
- 22-JavaScript 冒泡事件、事件捕获、默认事件、事件委托 DAY18(5.5)
一.冒泡排序 1.事件冒泡 bubbles:返回布尔值,指示事件是否是冒泡事件类型,默认true;cancelbubbles:返回布尔值,指示事件是否取消了冒泡事件 默认false' 2.阻止冒泡事件 ...
- 事件捕获、冒泡的工作原理
事件捕获.冒泡的工作原理 什么是事件流 什么是事件冒泡? 什么是事件捕获 图解 什么是事件流 事件流是指从页面中接收事件的顺序.也就是说,当一个事件产生时,这个事件的传播过程就是事件流. 什么是事件冒 ...
- 事件冒泡、事件捕获、http与https
事件流.事件冒泡.事件捕获.阻止事件冒泡.http与https 目录 事件流.事件冒泡.事件捕获.阻止事件冒泡.http与https 一.事件流 二.事件冒泡 三.事件捕获 四.阻止事件冒泡 五.取消 ...
- JS阻止冒泡和元素默认事件
JS阻止冒泡和元素默认事件 文章目录 JS阻止冒泡和元素默认事件 1.JS阻止冒泡 :stopPropagation() 2.阻止元素默认事件行为 preventDefault() onclick + ...
- jquery 阻止冒泡事件和阻止默认事件
jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
- React合成事件(阻止冒泡stopImmediatePropagation)
文章目录 一.遇到的问题 问题描述 分析 二.React 合成事件 1.执行顺序 2.合成事件阻止冒泡 2.1e.stopPropagation 2.2 e.nativeEvent.stopImmed ...
- JQuery阻止冒泡事件on绑定中异常情况分析
本文转载自https://www.cnblogs.com/tengj/p/4794947.html,纯粹作为日常笔记使用 科普下事件冒泡以及默认行为,以下面例子举列子: 事件冒泡:当点击内部butto ...
最新文章
- 绑定域名_[云丰网]如何绑定第三方购买的域名?
- 使用Azure SDK 1.4.1中的Web Deploy
- python flask 方法get_json返回(Ellipsis, Ellipsis)问题解决
- E-triples II_2019牛客暑期多校训练营(第四场)
- 环形队列出队的元素怎么输出出来_队列:队列在线程池等有限资源池中的应用...
- vuejs npm chromedriver 报错
- Python学习笔记:创建进程
- 利用console控制台调试php代码
- cc++编译链接过程
- DuiLib(一)——窗口及消息
- mac上配置java jdk环境
- BeanUtils笔记
- 王元元主编书籍计算机数学基础,计算机的数学基础有哪些
- android 系统打印服务,调用Android本地服务,实现打印pdf文件
- 微信小程序使用建行支付
- 四川师范大学计算机科学学院分数线,2020四川师范大学计算机科学学院考研复试分数线已公布...
- linux分区表导出与恢复,linux下磁盘分区表的备份和恢复
- 微信可以设置雪花昵称和彩色昵称了
- kso经验记录 --spring.net的应用以及配置
- 中信银行总行信息科技岗(成都)2020届校招/秋招面经+薪资待遇(更新完,已offer)
热门文章
- 2020年加密货币领域的5大做市商,都有谁?
- 《ResNeSt: Split-Attention Networks》阅读笔记
- 智慧旅游管理系统下的旅游业的发展规划
- 生成对抗:Pix2Pix
- 【老生谈算法】matlab实现最短路径算法——最短路径算法
- Sequelize 大于_巴中塔吊防雷接地系统接地电阻不大于_科杰防雷
- python 操作 zookeeper 快速入门
- Python-Django毕业设计调查问卷及调查数据统计系统(程序+Lw)
- linux磁盘分区dos分区与gpt,Linux与磁盘分区介绍(MBR,GPT)
- Vue - v-show