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 ...
随机推荐
- webapp中<meta>与css代码部署
1.页面头部标签申明 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" id="te ...
- MySQL8.0.17 - 初探 Clone Plugin
MySQL8.0.17推出了一个重量级的功能:clone plugin.允许用户可以将当前实例进行本地或者远程的clone.这在某些场景尤其想快速搭建复制备份或者在group replication里 ...
- Data Lake Analytics: 读/写PolarDB的数据
Data Lake Analytics 作为云上数据处理的枢纽,最近加入了对于PolarDB的支持, PolarDB 是阿里云自研的下一代关系型分布式云原生数据库,100%兼容MySQL,存储容量最高 ...
- vue.js_03_vue.js的样式和修饰符
1.vue.js的样式 <body> <div id="app"> <h1 :style="styleObj1">这是一个h ...
- js的深复制与浅复制
什么是深复制和浅复制? 深复制和浅复制的概念只存在于对象array和数组obj上. 浅复制是:模糊复制,就是不管对方是字符串类型还是引用类型都通通复制过来.结果两个变量的内容会同时变化. 深复制是:有 ...
- Jeecms6中后台控制层Action如何将值传入前台视图层模板中的？
转载:https://blog.csdn.net/wsm201005030226/article/details/44343069 Jeecms后台控制层如何传值到前台freemarker的? ...
- MyISAM 与 innoDB 的选择
1.MyISAM:默认表类型,它是基于传统的ISAM类型,ISAM是Indexed Sequential Access Method (有索引的顺序访问方法) 的缩写,它是存储记录和文件的标准方法.不 ...
- JDK、Eclipse、Tomcat、Maven、IDEA 常见问题
windows操作分成了32位和64位的系统,不同的系统安装的软件也不一样. 查询电脑操作系统是多少位? J D K 01. 下载安装 02. 目录解释 03. 配置环境变量 (JDK安装成功后进行配 ...
- day67test
作业 1.按照上方 知识点总结 模块,总结今天所学知识点: 2.有以下广告数据(实际数据命名可以略做调整) ad_data = { tv: [ {img: 'img/tv/001.png', titl ...
- VMware 设置支持UEFI
修改后缀名为 vmx 配置文件 添加行: bios.bootDelay = "10000" //延迟10秒进入系统 firmware = "efi" ...