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 ...
随机推荐
- SpringBoot Controller接收参数的几种方式盘点
本文不再更新,可能存在内容过时的情况,实时更新请移步我的新博客:SpringBoot Controller接收参数的几种方式盘点: SpringBoot Controller接收参数的几种常用方式盘点 ...
- IDEA设置maven项目的默认配置
IDEA设置maven项目的默认配置 问题描述 很多刚使用idea的人,用其创建maven工程时会遇到一个问题,明明给项目设置了新的maven配置(使用阿里镜像源或者自定义maven版本),但是重新打 ...
- Larval报错：后台上传图片，storage目录也有相应的图片，但前台访问不到图片。
需要执行命令.在public下建立文件软链接 php artisan storage:link
- 工控安全入门（六）——逆向角度看Vxworks
上一篇文章中我们对于固件进行了简单的分析,这一篇我们将会补充一些Vxworks的知识,同时继续升入研究固件内容. 由于涉及到操作系统的内容,建议大家在阅读本篇前有一定操作系统知识的基础,或者是阅读我的 ...
- 《Python机器学习及实践：从零开始通往Kaggle竞赛之路》
<Python 机器学习及实践–从零开始通往kaggle竞赛之路>很基础 主要介绍了Scikit-learn,顺带介绍了pandas.numpy.matplotlib.scipy. 本书代 ...
- jquery与js区别
js与jquery的区别 js里面找元素是通过dom操作,jquery是通过$ DOM:土鳖jQuery:土豪1. DOM-->jQuery(土鳖变土豪)拿钱砸:$Var txtName = d ...
- 线条之美，玩转SVG线条动画
线条之美,玩转SVG线条动画 作者:AlloyTeam www.alloyteam.com/2017/02/the-beauty-of-the-lines-break-lines-svg-animat ...
- 关于HTML和Css的一些总结
HTML HTML特点与基本结构 HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language). 超文本就是指页面内可以包含图片.链接 ...
- independent set 1
independent set 1 时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 102400K,其他语言204800K64bit IO Format: %lld 题目描述 Note: ...
- Leetcode147. Insertion Sort List对链表进行插入排序
对链表进行插入排序. 从第一个元素开始,该链表可以被认为已经部分排序(用黑色表示). 每次迭代时,从输入数据中移除一个元素(用红色表示),并原地将其插入到已排好序的链表中. 插入排序算法: 插入排序是 ...