js事件冒泡机制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件冒泡</title>
<style>
.big{
width: 500px;
height: 500px;
border: 1px solid red;
}
.two{
width: 300px;
height: 300px;
border: 1px solid green;
}
.three{
width: 100px;
height: 100px;
border: 1px solid yellow;
}
</style>
</head>
<body>
<div class="big">
<div class="two">
<div class="three"></div>
</div>
</div>
<script>
let big = document.getElementsByClassName('big')[0]
let two = document.getElementsByClassName('two')[0]
let three = document.getElementsByClassName('three')[0]
big.onclick = function () {
alert('big')
}
two.onclick = function () {
alert('two')
}
three.onclick = function (e) {
// 不阻止冒泡 会依次弹出 three two big
e.stopPropagation() // 事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转
// return false; // 事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转 直接就不执行事件直接跳出了
// event.preventDefault(); // 事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）
alert('three')
}
</script>
</body>
</html>
js事件冒泡机制的更多相关文章
- 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了
哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...
- JS事件冒泡机制和兼容性添加事件
本篇文章主要来讲讲 事件的冒泡机制 和 添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段 捕获阶段是指从父层往子层找.比如 <body> ...
- 浅谈js的事件冒泡机制
很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...
- js的事件冒泡机制
js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document这个根节点这里.js的事件冒泡机制,就像是一个水泡在水底下,冒泡到水面的过程. 摘自醉清玄
- 解析Javascript事件冒泡机制
本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...
- JavaScript中的事件冒泡机制
事件冒泡机制 事件冒泡发生的条件:当为多个嵌套的元素设置了相同的事件处理程序,它们将触发事件冒泡机制.在事件冒泡中,最内部的元素将首先触发其事件,然后是栈内的下一个元素触发该事件,以此类推,直到到达最 ...
- 什么是JS事件冒泡？
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...
- js事件冒泡和事件委托
js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...
- 什么是JS事件冒泡
什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...
随机推荐
- 1 eclipse 离线安装activiti插件
第一步:下载需要的离线activiti文件: 链接:https://pan.baidu.com/s/1-_XjIsuZfhiEZn6iLul6-Q 密码:mfyk (这是其他网友的链接) 第二步: ...
- 手机touch事件及参数【转】（自己懒得写了，找了一篇摘过来）
[html5构建触屏网站]之touch事件 前言 一个触屏网站到底和传统的pc端网站有什么区别呢,交互方式的改变首当其冲.例如我们常用的click事件,在触屏设备下是如此无力. 手机上的大部分交互都是 ...
- [文章汇总]ASP.NET Core框架揭秘[最近更新：2018/10/31]
之前一段时间都在个人公众号账号“大内老A”发布关于ASP.NET Core的系列文章,很多人留言希望能够同步到这里,所以在这里 对这些文章做一个汇总,以便于PC端阅读.如果说微软官方文档主要关于ASP ...
- TCP与UDP区别总结
TCP与UDP区别总结:1.TCP面向连接(如打电话要先拨号建立连接);UDP是无连接的,即发送数据之前不需要建立连接2.TCP提供可靠的服务.也就是说,通过TCP连接传送的数据,无差错,不丢失,不重 ...
- SVN和Git的功能和区别，尚学堂SVN和Git学习视频资料免费下载
对于软件开发人员来说,版本控制系统再熟悉不过了,所谓版本控制系统就是软件项目开发过程中用于储存开发人员所写代码所有修订版本的软件.目前常见的版本控制系统分为集中式版本控制系统(SVN)和分布式版本控制 ...
- Redis安装及使用详解
推荐在Linux系统上安装,这里我采用CentOS6: Redis采用3.0.0版本,官网下载即可 由于Redis是C语言编写,需要安装gcc(部分Linux自带gcc) yum install gc ...
- [Java]LeetCode690. 员工的重要性 | Employee Importance
You are given a data structure of employee information, which includes the employee's unique id, his ...
- [Swift]LeetCode946. 验证栈序列 | Validate Stack Sequences
Given two sequences pushed and popped with distinct values, return true if and only if this could ha ...
- Mysql数据库和表的增删改查以及数据备份&恢复
数据库 查看所有数据库 show databases; 使用数据库 use 数据库名; 查看当前使用的数据库 select database(); 创建数据库 create database 数据库名 ...
- css3的动画特效--元素旋转（transition，animation）
开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和transition动画一样,animation动画也是CSS3动画的一种,这类动 ...