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 ...
随机推荐
- Odoo 新 API 概述
__all__ = [ 'Environment', 'Meta', 'guess', 'noguess', 'model', 'multi', 'one', 'cr', 'cr_context', ...
- create-react-app 创建项目失败
创建失败后查阅相关资料,亲测删除 C:\Users\Administrator\AppData\Roaming\npm-cache\ 该文件夹下所有内容后成功.
- VS2005连接MySQL C API
1.在属性添加:附加目录,附加依赖库,附加库目录: 2.在stdafx.h中加入: #include <winsock.h> #include "mysql.h" 3. ...
- 第03章 科学计算库Numpy
016.Numpy数据结构 关于矩阵运算的库 矩阵 017.Numpy基本操作 判断每一个元素的 018.Numpy矩阵属性 019.Numpy矩阵操作 020.Numpy常用函数 按列拼接就用 ...
- 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 方法一 ...
- PHP苹果推送实现（APNS）
以下资料网上收集整理得来 1.在ios dev center制作相关证书和文件用客户端实现(不再赘述,网上很多,) 网上教程: http://blog.csdn.net/lizhenning87/ar ...
- xampp中tomcat服务器无法启动
xampp中的Tomcat服务器无法启动的问题... 我的Java中自己安装了Tomcat服务器,webstorm中还有一个php服务器,,,xampp中的能不能用我就不需要去理会了...反正tomc ...
- Python缩进和选择
Python缩进和选择 缩进 Python最具特色的是用缩进来标明成块的代码.我下面以if选择结构来举例.if后面跟随条件,如果条件成立,则执行归属于if的一个代码块. 先看C语言的表达方式(注意,这 ...
- Python当前进程信息 (os包)
Python当前进程信息 (os包) 我们在Linux的概念与体系,多次提及进程的重要性.Python的os包中有查询和修改进程信息的函数.学习Python的这些工具也有助于理解Linux体系. (o ...
- CesiumLab V1.4 分类3dtiles生成（倾斜单体化、楼层房间交互）我记得我是写过一篇关于倾斜单体化的简书文章的，但是现在找不到了。不过找不到也好，就让他随风逝去吧，因为当时我写那篇文章的时候，就发现了cesium实际是有另一种更高效的单体化。就下面这个示例https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=
我记得我是写过一篇关于倾斜单体化的简书文章的,但是现在找不到了.不过找不到也好,就让他随风逝去吧,因为当时我写那篇文章的时候,就发现了cesium实际是有另一种更高效的单体化.就下面这个示例 http ...