JavaScript--阻止事件冒泡stopPropagation和cancelBubble
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#yeye{
width: 500px;
height: 500px;
background-color: #f24b4b;
}
#baba{
width: 400px;
height: 400px;
background-color: #44c28d;
}
#erzi{
width: 300px;
height: 300px;
background-color: #6e8cd5;
}
</style>
<script>
window.onload = function () { /**
*
*
* 事件捕获：
* 浏览器就好像盲人一样，要找某个元素，其实挨个挨个问的方式去找
* 这个过程我们叫事件的捕获过程.
* // 从外到里，直到找到目标
*
* 事件冒泡：
* 找到到目标后，其实还有一个回馈的过程，逐级往上传播
* 这个过程我们叫事件的冒泡过程.
* // 从里到外，直到传到window
*
* 注意：
* 我们一般都是事件冒泡的方式注册事件的
*
*
* 事件的三个阶段 1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段
事件对象.eventPhase属性可以查看事件触发时所处的阶段 *
* */ var yeye = document.getElementById("yeye");
var baba = document.getElementById("baba");
var erzi = document.getElementById("erzi"); erzi.onclick = function (event) {
event = event || window.event;
if(event.stopPropagation) {
// ie9+ 其余全支持
event.stopPropagation();
}else{
// 全部兼容 兼容ie8
event.cancelBubble = true;
}
console.log("儿子", event);
}
baba.onclick = function (event) {
event = event || window.event;
if(event.stopPropagation) {
// ie9+ 其余全支持
event.stopPropagation();
}else{
// 全部兼容 兼容ie的
event.cancelBubble = true;
}
console.log("爸爸", event);
}
yeye.onclick = function (event) {
event = event || window.event;
if(event.stopPropagation) {
// ie9+ 其余全支持
event.stopPropagation();
}else{
// 全部兼容
event.cancelBubble = true;
}
console.log("爷爷", event);
}
}
</script>
</head>
<body>
<div id="yeye">
<div id="baba">
<div id="erzi"></div>
</div>
</div>
</body>
</html>
JavaScript--阻止事件冒泡stopPropagation和cancelBubble的更多相关文章
- JavaScript 阻止事件冒泡的实现方法
JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function c ...
- javascript 阻止事件冒泡 cancelBubble
javascript简单的阻止事件冒泡,可以使用事件的cancelBubble方法为true: html部分 <button id="btn1">点击显示div< ...
- javascript阻止事件冒泡的兼容写法及其相关示例
//阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...
- JavaScript阻止事件冒泡（兼容IE、Chrome、FF）
这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <ht ...
- javascript阻止事件冒泡和浏览器的默认行为
1.阻止事件冒泡,使成为捕获型事件触发机制. 1 function stopBubble(e) { 2 //如果提供了事件对象,则这是一个非IE浏览器 3 if ( e && e.st ...
- javascript 阻止事件冒泡
阻止冒泡 冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷了. 举个栗子: 父容器是 ...
- javascript 阻止事件冒泡和阻止默认事件对比
公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...
- JavaScript阻止事件冒泡
今天在自学敲代码的时候发现了一个问题,当时的例子如下: <!DOCTYPE html> <html lang="en"> <head> < ...
- javascript阻止事件冒泡的方法
有的时候我们需要实现这样的功能: 点击某个蒙版,该蒙版消失,但是如果点击蒙版上的某个元素,希望蒙版不消失,这就需要用到阻止事件的冒泡了 html: <div id="outer&quo ...
随机推荐
- webpack打包css文件
1. 安装css-loader 与 style-loader npm install style-loader css-loader --save-dev 2. 在webpack.config.js中 ...
- Thinkphp 加载更多
要实现的效果是这样的: 每次点击显示更多按钮,都会往下显示2条数据,直到后面没有数据了.. 数据表: articleList模板文件 <include file="./Applicat ...
- Maven实战01_Maven简介
1:何为Maven Maven:中文翻译为"知识的积累",也可翻译为"专家"或"内行". 谈到Maven,就不得不提"构建(bui ...
- 注册.NET Framework
C:\Windows\Microsoft.NET\Framework\v4.0.30319\aspnet_regiis.exe /i
- spring-注解配置-junit整合测试-aop
1 使用注解配置spring 1.1 步骤 导包4+2+spring-aop 1.为主配置文件引入新的命名空间(约束) 2.开启使用注解代理配置文件 3.在类中使用注解完成配置 1.2 将对象注册到容 ...
- linux 三剑客命令(grep,sed ,awk)
grep 命令 :强大的文本’搜索’工具 1.grep -n 'word' file_name 在file_name文件中找到word所在的所有行并显示.-n 为显示行号. 2 ...
- 入门servlet：request请求转发和共享数据
request 请求转发:一种在服务器内部的资源跳转方式 步骤: 1.通过request对象获取请求转发器对象:RequestDispatcher getRequestDispatcher(Strin ...
- CF538G （套路题）
CF538G 题目大意 你有一个长度为\(l\)的指令序列,每个指令为向上,向下,向左,向右中的一种. 机器人会循环执行该序列,即,执行完第\(l\)个指令后,就会重新开始执行第一个指令. 现在,给你 ...
- Leetcode221. Maximal Square最大正方形
在一个由 0 和 1 组成的二维矩阵内,找到只包含 1 的最大正方形,并返回其面积. 示例: 输入: 1 0 1 0 0 1 0 1 1 1 1 1 1 1 1 1 0 0 1 0 输出: 4 方法一 ...
- Python_异常处理try...except、raise
一.try...except 有时候我们写程序的时候,会出现一些错误或异常,导致程序终止.例如,做除法时,除数为0,会引起一个ZeroDivisionError 例子: 1 2 3 4 a=10 b= ...