JS阻止冒泡事件
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#dv1{
width: 500px;height: 500px;background: red;border: 1px solid;
}
#dv2{
width: 400px;height: 400px;background: blue;border: 1px solid;
}
#dv3{
width: 200px;height: 200px;background: yellow;border: 1px solid;
}
</style>
</head>
<body>
<div id ="dv1">
<div id ="dv2">
<div id ="dv3"></div>
</div>
</div>
<script type="text/javascript">
var b1=document.getElementById('dv1');
var b2=document.getElementById('dv2');
var b3=document.getElementById('dv3');
b1.onclick=function () {
alert(1);
// body...
}
function zuzhi(evt){
var e=evt||window.event
window.event? e.cancelBubble=true:e.stopPropagation();
}
b2.onclick=function () {
alert(2)
// body...
}
b3.onclick=function () {
alert(3);
zuzhi();
// body...
}
</script>
</body>
</html>
JS阻止冒泡事件的更多相关文章
- js阻止冒泡事件和默认事件的方法
阻止默认事件 function stopDeFault(e){ if(e&&e.preventDefault){//非IE e.preventDefault(); }else{//IE ...
- js 阻止冒泡事件和默认事件
阻止事件冒泡 window.enent ? window.enent.cancelBubble = true : e.stopPropagation() function stopBubble(eve ...
- JS阻止冒泡事件以及默认事件发生的简单方法
如果<p>是在<div>里面,那么呢,<P>有一个onclick事件,<div>也有onclick事件,为了触发<P>的点击事件时,不触发父 ...
- js阻止冒泡事件及默认操作
1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 .jQuery对 ...
- JS点击子元素不触发父元素点击事件(js阻止冒泡)
js阻止冒泡 <html> <title></title> <head> <meta charset="utf-8"> ...
- js阻止冒泡及jquery阻止事件冒泡示例介绍
js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...
- js阻止冒泡和默认事件（默认行为）详解- jquery DefaultPrevented 函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- js中冒泡事件和捕获事件
js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...
- DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理
事件对象——兼容处理 /* * 功能: 事件对象兼容 * 参数: 表示常规浏览器的事件对象e */ function getEvent(e) { // 如果存在e存在,直接返回,否则返回window. ...
随机推荐
- 20个最有用的Python数据科学库
核心库与统计 1. NumPy(提交:17911,贡献者:641) 一般我们会将科学领域的库作为清单打头,NumPy 是该领域的主要软件库之一.它旨在处理大型的多维数组和矩阵,并提供了很多高级的数学函 ...
- P1540_机器(JAVA语言)
题目背景 小晨的电脑上安装了一个机器翻译软件,他经常用这个软件来翻译英语文章. 题目描述 这个翻译软件的原理很简单,它只是从头到尾,依次将每个英文单词用对应的中文含义来替换.对于每个英文单词,软件会先 ...
- 保姆级教程！使用k3d实现K3s高可用！
你是否曾经想尝试使用K3s的高可用模式?但是苦于没有3个"备用节点",或者没有设置相同数量的虚拟机所需的时间?那么k3d这个方案也许你十分需要噢! 如果你对k3d尚不了解,它的名字 ...
- ES核心概念和原理
ES:1:倒排索引 基于Document 关键词索引实现 . 根据关键词做索引 相关度 a. 数据结构 i. 包含关键词的Document List ii. 关键词在每个doc中出现的次数 词频 TF ...
- 第11 章 ： 可观测性：你的应用健康吗？(liveness和readiness)
课时 11:可观测性:你的应用健康吗?(莫源) 本次课程的分享主要围绕以下五个部分: 介绍一些整体需求的来源: 介绍在 K8s 中 Liveness 和 Readiness 的使用方式: 介绍在 K8 ...
- Redis系列-存储篇sorted set主要操作命令
Redis系列-存储篇sorted set主要操作函数小结 redis支持有序集合,即sorted set.sorted set在set的基础上,增加了排序属性,是set的升级版.这里简要谈谈sort ...
- Recoil 中多级数据联动及数据重置的合理做法
前情回顾 书接上回,前面引出了在数据存在级联的情况下,各下拉框之间的默认值及值变化的处理.简单回顾一下: 场景是: 地域下拉决定可选的可用区 默认选中第一个地域,通过设置 atom 的 default ...
- OO_Unit4暨学期总结
OO_Unit4暨学期总结 一.本单元架构设计 1.1 第13次作业架构设计 就我个人而言,这次作业应该是本单元难度最大的一次作业,原因在于陡然转向UML后,对UML各个元素的关系理解需要先下一番功夫 ...
- Java异常系列
Java异常(一) Java异常简介及其架构 Java异常(二) <Effective Java>中关于异常处理的几条建议 Java异常(三) <Java Puzzles>中关 ...
- Python面向对象的高级编程
数据封装.继承和多态只是面向对象程序设计中最基础的3个概念.在Python中,面向对象还有很多高级特性,允许我们写出非常强大的功能. 我们会讨论多重继承.定制类.元类等概念. 使用__slots__ ...