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,那么这个 ...
随机推荐
- 已知一个字符串S 以及长度为n的字符数组a，编写一个函数，统计a中每个字符在字符串中的出现次数
import java.util.Scanner; /** * @author:(LiberHome) * @date:Created in 2019/3/6 21:04 * @description ...
- 产品经理教你如何构建电商电销 CRM 系统
在电销或网销行业中老板们会经常问到,上个月渠道投放花了多少钱,来了多少量,转化率怎么样,获得了多少新线索,获客成本如何,销售额是多少? 劈天盖地的各种数据需求飞来,没有一个像样的系统该如何是好?这时候 ...
- IntelliJ IDEA 使用 Git 并将 GitHub 作为远程代码仓库
安装本地Git 官方下载地址:http://git-scm.com/downloads 不过这个地址一般下不动,我们可以选择在腾讯软件中心下载,速度很快. 腾讯软件中心的下载地址:https://pc ...
- [Swift]LeetCode172. 阶乘后的零 | Factorial Trailing Zeroes
Given an integer n, return the number of trailing zeroes in n!. Example 1: Input: 3 Output: 0 Explan ...
- [Swift]LeetCode241. 为运算表达式设计优先级 | Different Ways to Add Parentheses
Given a string of numbers and operators, return all possible results from computing all the differen ...
- [Swift]LeetCode298. 二叉树最长连续序列 $ Binary Tree Longest Consecutive Sequence
Given a binary tree, find the length of the longest consecutive sequence path. The path refers to an ...
- [Swift]LeetCode343. 整数拆分 | Integer Break
Given a positive integer n, break it into the sum of at least two positive integers and maximize the ...
- java中this和super关键字的使用
这几天看到类在继承时会用到this和super,这里就做了一点总结,与各位共同交流,有错误请各位指正~ this this是自身的一个对象,代表对象本身,可以理解为:指向对象本身的一个指针. this ...
- Docker 搭建pxc集群 + haproxy + keepalived 高可用（一）
一.首先需要安装好docker,安装方法可以参考之前一篇博文Centos7安装docker [root@localhost ~]# systemctl start docker [root@local ...
- RabbitQM使用笔记
一:安装 and 卸载 curl -s https://packagecloud.io/install/repositories/rabbitmq/rabbitmq-server/script.r ...