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 ...
随机推荐
- IDEA的下载安装
一. 下载 二. 安装 安装成功!!! 选择试用版
- webServices学习一（了解基础和作用。）
一.第一部分 1. 带着几个问题学习: l 什么是WebService? l 它能做什么? l 为什么要学习WebService? l 学习WebService ...
- 入门servlet：request获取请求行数据
/** * 演示Request对象获取请求行数据 */ @WebServlet("/test") public class RequestDemo1 extends HttpSer ...
- python中常见的错误
python中常见的错误 1.IndentationError: unindent does not match any outer indentation leve 众所周知,Python语法要 ...
- Effective Modern C++ 条款2：理解auto型别推导
在条款1中,我们已经了解了有关模板型别的推导的一切必要知识,那么也就意味着基本上了解了auto型别推导的一切必要知识. 因为,除了一个奇妙的例外情况,auto型别推导就是模板型别推导.尽管和模板型别推 ...
- K8s 学习者绝对不能错过的最全知识图谱（内含 56个知识点链接）
导读:Kubernetes 作为云原生时代的“操作系统”,熟悉和使用它是每名用户的必备技能.本篇文章概述了容器服务 Kubernetes 的知识图谱,部分内容参考了网上的知识图谱,旨在帮助用户更好的了 ...
- TZ_06_SpringMVC_传统文件上传和SpringMVC文件上传方式
1.传统文件上传方式 <!-- 文件上传需要的jar --> <dependency> <groupId>commons-fileupload</groupI ...
- JavaScript中用var和不用var的区别
Javascript声明变量的,虽然用var关键字声明和不用关键字声明,很多时候运行并没有问题,但是这两种方式还是有区别的.可以正常运行的代码并不代表是合适的代码. varnum=1; 是在当前域中声 ...
- postman发送get和post请求
一.postman发送get请求 在地址栏里输入请求url(用到拼接方式):http://127.0.0.1:8081/getuser?userid=1 选择“GET”方式, 点击“send”得到 ...
- neo4j批量导入neo4j-import
neo4j数据批量导入 1 neo4j基本参数 1.1 启动与关闭: 1.2 neo4j-admin的参数:控制内存 1.2.1 memrec 是查看参考内存设置 1.2.2 指定缓存–pagecac ...